在 Windows 系统上启动一个 Vue + Spring Boot 项目，涉及到前后端的环境配置、依赖安装、构建和调试等一系列步骤。接下来，我会详细讲解如何设置和启动 Vue + Spring Boot 项目，并分享一些常见的坑及其解决方法。
1. 前端 (Vue) 环境配置
1.1 安装 Node.js 和 npm
Vue 项目依赖于 Node.js 和 npm，因此需要先安装 Node.js。
- 访问 Node.js 官网 下载 LTS 版本。
- 安装 Node.js 后，使用以下命令确认安装成功：
node -v npm -v
1.2 安装 Vue CLI
Vue CLI 是用于快速构建 Vue 应用的工具。使用以下命令全局安装 Vue CLI：
npm install -g @vue/cli
验证是否安装成功：
vue --version
1.3 创建 Vue 项目
创建一个新的 Vue 项目：
vue create my-project
在创建过程中，你可以选择手动配置（选择插件）或使用默认配置。
1.4 启动 Vue 项目
进入 Vue 项目目录并启动开发服务器：
cd my-project
npm run serve
此时，Vue 应用会在 http://localhost:8080/ 启动。你可以在浏览器中访问。
2. 后端 (Spring Boot) 环境配置
2.1 安装 JDK 和 Maven
- JDK：Spring Boot 需要 Java 8 或以上版本。
- 访问 Oracle 官网 或使用 OpenJDK。
- 安装后，设置 JAVA_HOME 环境变量，确保
java命令可用。
- Maven：Spring Boot 推荐使用 Maven 来构建项目。
- 访问 Maven 官网 下载并解压。
- 设置 MAVEN_HOME 环境变量，并将
bin目录加入PATH中。
安装完成后，确认安装成功：
java -version
mvn -version
2.2 创建 Spring Boot 项目
你可以使用 Spring Initializr 或 IDE（如 IntelliJ IDEA、Eclipse）来生成一个 Spring Boot 项目。
- 访问 Spring Initializr 选择所需的配置（如选择
Web、JPA、MySQL、DevTools等）。 - 下载并解压后，使用 IDE 打开。
2.3 启动 Spring Boot 项目
在 Spring Boot 项目根目录下运行以下命令：
mvn spring-boot:run
默认情况下，Spring Boot 会启动在 http://localhost:8080。
3. 配置前后端联调
前后端联调的关键是让 Vue 前端能够正确调用 Spring Boot 后端的接口。确保后端的 API 接口能够被前端正确访问。
3.1 配置跨域 (CORS)
Spring Boot 默认不允许跨域请求。为了让 Vue 前端能够访问后端接口，需要配置跨域支持。
- 在 Spring Boot 项目的主类中，使用
@CrossOrigin注解允许跨域请求：
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;
@CrossOrigin(origins = "http://localhost:8080") // 允许来自前端 Vue 项目的请求
@RestController
public class MyController {
@RequestMapping("/api/test")
public String test() {
return "Hello from Spring Boot";
}
}
或者，全局配置跨域支持：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080") // 允许 Vue 前端跨域请求
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
}
3.2 前端请求后端接口
Vue 前端通过 axios 或其他 HTTP 请求库来调用 Spring Boot 后端接口。
- 安装 axios：
npm install axios
- 在 Vue 中使用
axios调用接口：
import axios from 'axios';
axios.get('http://localhost:8080/api/test')
.then(response => {
console.log(response.data); // 输出后端返回的消息
})
.catch(error => {
console.error('There was an error!', error);
});
3.3 配置 Vue 项目的 proxy
为了简化开发，Vue CLI 提供了一个内置的开发代理功能，可以将所有的 /api 请求代理到 Spring Boot 后端。
在 Vue 项目的根目录下创建或修改 vue.config.js 文件，添加代理配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080', // Spring Boot 后端地址
changeOrigin: true,
secure: false
}
}
}
}
这样，当你在 Vue 中发起请求时，例如 axios.get('/api/test')，它会自动代理到 http://localhost:8080/api/test。
4. 部署和打包
4.1 打包 Spring Boot 项目
使用以下命令打包 Spring Boot 项目为 .jar 文件：
mvn clean package
这会在 target 目录下生成一个 .jar 文件。你可以通过以下命令来启动：
java -jar target/your-app.jar
4.2 打包 Vue 项目
- 使用以下命令在生产模式下构建 Vue 项目：
npm run build
- Vue 会将构建后的静态文件输出到
dist/目录。你可以将这些静态文件部署到任何静态文件服务器（如 Nginx）上，或者将它们打包到 Spring Boot 项目中。
4.3 将 Vue 构建文件放入 Spring Boot
如果你想将构建后的 Vue 文件直接部署到 Spring Boot 中，可以将 dist/ 目录下的文件复制到 Spring Boot 项目的 src/main/resources/static/ 目录下。
Spring Boot 会自动提供 static/ 下的静态文件。这样你就可以通过 http://localhost:8080/ 访问 Vue 应用。
5. 常见问题及解决方法
5.1 端口冲突
- 问题：Vue 和 Spring Boot 默认都使用
8080端口，可能会导致冲突。 - 解决方法：可以更改其中一个的端口。
- Vue：修改
vue.config.js文件，指定一个不同的端口：module.exports = { devServer: { port: 8081 } } - Spring Boot：修改
application.properties或application.yml文件：server.port=8081
- Vue：修改
5.2 CORS 问题
- 问题：如果没有正确配置跨域，前端会被浏览器阻止请求。
- 解决方法：如上所述，配置 Spring Boot 中的
@CrossOrigin或WebMvcConfigurer。
5.3 前后端分离部署问题
- 问题：开发环境中使用代理，但是在生产环境中需要将前后端部署在不同的服务器上。
- 解决方法：在生产环境中，前端构建好的静态文件（
dist目录）可以通过 Nginx 或 Apache 部署，而后端的 Spring Boot 应用则继续通过独立的服务部署。
总结
- 在 Windows 上开发 Vue + Spring Boot 项目，首先需要配置好前后端的环境（Node.js、Maven、JDK）。
- 通过配置 CORS 和 axios 进行前后端联调。
- 配置 proxy 代理解决跨域问题，简化开发过程。
- 项目完成后，可以分别打包前后端，前端构建后的文件可以直接放入 Spring Boot 的
static目录中，或者使用独立的静态资源服务器进行部署。
这些步骤应该帮助你顺利启动并调试 Vue + Spring Boot 项目。
发表回复