🤖 Assistant

🚀 SpringBoot + Vue 前后端分离项目运行指南

本文介绍如何运行一个基于 SpringBoot（后端） + Vue（前端） 的前后端分离项目。

链接

springboot运行

vue运行

🔧 运行环境准备

在运行项目前，请确保已安装以下环境：
| 环境 | 版本要求 |
|———|————-|
| JDK | 1.8+ |
| Maven 或 Gradle | 3.6+ |
| Node.js | 14.x+ |
| npm / yarn | 最新版 |

🔹 检查安装是否成功：

# 检查 JDK
java -version

# 检查 Maven
mvn -v

# 检查 Node.js 和 npm
node -v
npm -v

⚙ 后端（SpringBoot）运行

进入后端项目目录
1
cd springboot-vue-backend

使用 Maven 编译并运行

1 2	mvn clean install # 编译项目 mvn spring-boot:run # 运行项目

也可以用 Gradle：
1
gradle bootRun

验证后端是否启动
👉 访问 http://localhost:8080 或 http://localhost:8080/api/test（查看是否有接口返回）

📦 前端（Vue）运行

进入前端项目目录
1
cd vue-frontend
安装依赖（首次运行需要）
1
npm install # 或 yarn install
运行 Vue 项目
1
npm run serve # 或 yarn serve
开发模式默认访问 http://localhost:8081（可能需要 --port 8081 避免端口冲突）
访问前端页面
👉 打开浏览器访问 http://localhost:8081

🔗 前后端联调配置

后端 API 跨域（SpringBoot）
在 application.properties 或 @CrossOrigin 注解配置跨域：

1
2
3

# application.properties
server.port=8080
spring.mvc.cors.allowed-origins=http://localhost:8081

前端 API 代理（Vue）
在 vue.config.js 中配置后端代理，避免跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

🏁 运行效果

✅ 后端 API 正常运行：
后端运行
✅ 前端页面访问：
前端运行

🔥 常见问题

问题	解决方案
`npm install` 报错	尝试 `npm cache clean --force` 或 `rm -rf node_modules package-lock.json`
端口冲突	修改后端 `server.port` 或前端 `npm run serve --port 8082`
跨域请求失败	确保已正确配置 `@CrossOrigin` 或 `vue.config.js` 代理