本地从零部署 Java+Vue 前后端分离项目（超详细新手保姆级教程）

一、前言现在企业开发基本都是前后端分离架构后端用 Java SpringBoot 提供接口、操作数据库前端用 Vue 搭建页面、做交互展示。很多刚入门的同学单独跑后端、单独跑前端都没问题但本地联调对接接口时总会遇到跨域、接口 404、前端拿不到后端数据、端口冲突等各种坑。今天就给大家整理一套完整、可直接照抄操作的本地部署流程从环境准备、后端配置启动、前端依赖安装、代理跨域配置到最后前后端联调连通一步不落下新手也能一次性跑通项目。二、前期必备环境准备在部署项目前电脑必须提前装好以下基础环境缺一不可JDK 1.8 及以上运行 Java SpringBoot 后端项目Maven 3.6 及以上管理后端依赖、打包项目Node.js 14 / 16运行 Vue 前端自带 npm 包管理工具MySQL 5.7/8.0存放项目业务数据开发工具IDEA打开运行 Java 后端、VS Code专门编辑启动 Vue 前端三、Java SpringBoot 后端本地部署配置1. 导入并初始化项目打开 IDEA点击File - Open选择本地后端项目根目录等待 IDEA 自动识别 Maven 项目联网加载所有依赖包第一次打开耐心等待依赖下载完成即可。2. 配置数据库与服务端口找到项目配置文件application.yml修改数据库连接、服务端口直接复制下面代码改成自己的数据库信息就行yamlserver: # 后端占用端口避免和前端冲突 port: 8081 spring: # 数据库配置 datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/test_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: 1234563. 全局跨域配置重点如果不配置跨域前端直接访问后端接口会浏览器跨域拦截新建一个跨域配置类java运行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 CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) .allowedMethods(GET,POST,PUT,DELETE) .allowCredentials(true) .maxAge(3600); } }4. 启动后端并测试接口找到带SpringBootApplication注解的启动类右键Run运行项目。控制台输出Started xxxApplication in xxx seconds就代表启动成功。可以用浏览器或 Postman 访问测试接口http://localhost:8081/api/test能正常返回 JSON 数据说明后端接口完全正常。四、Vue 前端本地部署与对接后端1. 用 VS Code 打开前端项目右键 Vue 项目文件夹通过 VS Code 打开打开底部终端窗口准备执行命令。2. 安装前端依赖首次拉取项目必须安装依赖执行命令bash运行# 安装项目所有依赖 npm install如果下载依赖很慢切换国内镜像源bash运行npm config set registry https://registry.npmmirror.com/3. 配置环境接口地址在.env.development开发环境配置文件中指定后端基础地址plaintextVUE_APP_BASE_API http://localhost:80814. 配置前端代理解决跨域修改vue.config.js配置代理前端统一用/api转发到后端javascript运行module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }5. 启动 Vue 前端项目终端输入启动命令bash运行npm run serve启动成功后访问地址http://localhost:8080五、前后端联调完整连通保证后端 SpringBoot 运行在8081端口保证 Vue 前端运行在8080端口前端页面发起接口请求格式用/api/xxx页面能正常加载后端返回的数据、列表、表单信息就说明前后端彻底连通部署成功六、常见报错与快速解决办法跨域请求被拦截后端没写全局跨域配置或前端代理 target 地址写错核对端口和地址即可。前端 npm install 报错删除项目里node_modules文件夹和package-lock.json重新执行安装。接口 404 找不到后端接口路径、前端请求路径不一致或后端端口不是 8081统一核对修改。数据库连接失败检查 MySQL 是否启动、账号密码、数据库名是否和配置文件一致。七、结尾总结本地部署 JavaVue 前后端分离项目核心逻辑就三点一是后端配置好数据库、端口和跨域并正常启动二是前端装完依赖、配置好环境地址和代理转发三是两端端口不冲突通过 /api 路径联调即可。按照本文配置直接照搬不用额外改复杂逻辑新手也能一次就跑通前后端联调项目适合日常开发学习、毕业设计、课程项目使用。