springboot整合vue执行过程
时间: 2023-09-17 22:09:11 浏览: 112
SpringBoot是一种基于Spring框架的快速开发Web应用程序的工具。而Vue是一种用于构建用户界面的渐进式JavaScript框架。将SpringBoot和Vue结合起来,可以轻松构建现代化的Web应用程序。
下面是SpringBoot整合Vue的执行过程:
1. 创建一个SpringBoot项目:可以使用Spring Initializr或者手动创建一个Maven项目。在pom.xml中添加SpringBoot和Vue的依赖。
2. 创建Vue项目:使用Vue的脚手架工具创建一个Vue项目。可以使用命令行或者Vue的GUI工具来创建。
3. 配置Vue项目:在Vue项目中,需要将API请求代理到SpringBoot服务器。在vue.config.js文件中添加以下代码:
```
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true
}
}
}
}
```
这段代码告诉Vue的开发服务器将所有以/api开头的请求代理到SpringBoot服务器的8080端口。
4. 编写代码:在Vue项目中,可以使用axios或者其他HTTP客户端库来发送API请求。在SpringBoot项目中,需要编写控制器和服务来处理这些请求。
5. 打包并运行:在Vue项目中,使用npm run build命令打包项目。将生成的dist目录的内容复制到SpringBoot项目的src/main/resources/static目录下。在SpringBoot项目中,使用mvn spring-boot:run命令运行应用程序。
6. 访问应用程序:在浏览器中访问http://localhost:8080即可访问应用程序。
以上就是SpringBoot整合Vue的执行过程。
阅读全文