在 macOS 系统上启动一个 Vue + Spring Boot 项目涉及到前后端环境配置、依赖安装、构建和调试等多个步骤。以下是详细的步骤和一些常见的问题及解决方法，帮助你顺利启动和调试 Vue + Spring Boot 项目。

1. 安装前端环境 (Vue)

1.1 安装 Node.js 和 npm

Vue 项目依赖 Node.js 和 npm（Node.js 包管理器），你需要首先安装这两个工具。

  1. 安装 Node.js：
    • 访问 Node.js 官网，选择 LTS 版本 下载并安装。
    • 安装完成后，在终端中运行以下命令验证是否安装成功： node -v npm -v

1.2 安装 Vue CLI

Vue CLI 是一个用于快速构建 Vue 应用的工具，你需要全局安装它：

npm install -g @vue/cli

安装完成后，通过以下命令验证是否安装成功：

vue --version

1.3 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-project

在创建过程中，你可以选择手动配置或使用默认配置。创建完成后，进入项目目录并启动开发服务器：

cd my-project
npm run serve

此时，Vue 应用将默认在 http://localhost:8080 启动。你可以在浏览器中访问。

2. 安装后端环境 (Spring Boot)

2.1 安装 JDK 和 Maven

  • JDK：Spring Boot 需要 Java 8 或更高版本。
    • 你可以通过 OpenJDK 或 Oracle 官网 下载和安装 JDK。
    • 安装后，设置 JAVA_HOME 环境变量，确保 java 命令可用。
    验证是否安装成功： java -version
  • Maven：Spring Boot 使用 Maven 构建项目。
    • 访问 Maven 官网 下载并解压。
    • 设置 MAVEN_HOME 环境变量，并将 bin 目录添加到 PATH 中。
    验证是否安装成功： mvn -version

2.2 创建 Spring Boot 项目

可以使用 Spring Initializr 快速创建一个 Spring Boot 项目：

  1. 访问 Spring Initializr，选择 Java 版本、Spring Boot 版本、依赖（如 Web、JPA、MySQL、DevTools 等）。
  2. 生成并下载 ZIP 文件，解压后使用你喜欢的 IDE（如 IntelliJ IDEA、Eclipse）打开。

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 默认不允许跨域请求，因此需要配置 CORS（跨域资源共享）支持。

  • 在 Spring Boot 的控制器中，使用 @CrossOrigin 注解来允许跨域请求： @RestController @CrossOrigin(origins = "http://localhost:8081") // 允许来自 Vue 前端的请求 public class MyController { @GetMapping("/api/test") public String test() { return "Hello from Spring Boot"; } }
  • 或者在 全局配置 中添加跨域支持： @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8081") // 允许 Vue 前端跨域请求 .allowedMethods("GET", "POST", "PUT", "DELETE"); } }

3.2 配置 Vue 请求后端接口

在 Vue 项目中，使用 axios 或 fetch 来发起 HTTP 请求。

  • 安装 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 提供了一个内置的开发代理功能，可以将所有的 /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 项目

  1. 在 Spring Boot 项目的根目录下运行以下命令，打包为 .jar 文件： mvn clean package
  2. 打包完成后，.jar 文件会生成在 target/ 目录下。
  3. 使用以下命令运行 .jar 文件： java -jar target/your-app.jar

4.2 打包 Vue 项目

  1. 在 Vue 项目的根目录下，使用以下命令进行生产模式的构建： npm run build
  2. Vue 会将构建后的静态文件输出到 dist/ 目录。你可以将这些文件部署到任何静态文件服务器（如 Nginx）上，或者将它们直接打包到 Spring Boot 项目中。

4.3 将 Vue 构建文件放入 Spring Boot

  • 如果你希望将 Vue 构建后的静态文件直接放到 Spring Boot 项目中，可以将 dist/ 目录下的文件复制到 Spring Boot 项目的 src/main/resources/static/ 目录下。
  • Spring Boot 会自动提供 static/ 下的静态文件。

4.4 运行 Spring Boot + Vue 项目

  1. 后端：确保 Spring Boot 后端应用正在运行。
  2. 前端：确保 Vue 前端已经打包并被正确托管（例如使用 Nginx 或其他 Web 服务器）。
  3. 你可以通过 http://localhost:8080 访问 Spring Boot 后端，通过 http://localhost:8081 访问前端 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

5.2 CORS 错误

  • 问题：前端请求后端接口时出现 CORS 错误。
  • 解决方法：确保在 Spring Boot 后端添加了跨域配置，允许来自前端地址的请求。

5.3 无法启动 Vue 项目

  • 问题：Vue 项目启动失败或出现错误。
  • 解决方法：
    • 确保你已经正确安装了所有的依赖（运行 npm install）。
    • 清理缓存并重试：npm cache clean --force。

5.4 生产环境部署问题

  • 问题：在生产环境中部署时遇到问题，如 Vue 项目不能正确访问 Spring Boot 后端。
  • 解决方法：确保前后端的部署

配置正确，使用正确的服务器地址，且配置了合适的跨域和代理设置。

总结

在 macOS 系统上启动 Vue + Spring Boot 项目主要包括以下步骤：

  1. 配置前端环境（安装 Node.js、Vue CLI，创建 Vue 项目）。
  2. 配置后端环境（安装 JDK、Maven，创建 Spring Boot 项目）。
  3. 配置前后端联调，确保 Vue 能够正确调用 Spring Boot 提供的接口。
  4. 打包并部署前后端应用，确保前后端分离。
  5. 解决常见问题，如端口冲突、CORS 错误、部署问题等。

通过以上步骤，你可以顺利在 macOS 上启动并调试 Vue + Spring Boot 项目。