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

原创已于 2026-05-13 16:34:45 修改 · 248 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#java #vue.js #开发语言

于 2026-05-13 16:28:25 首次发布

一、前言

现在企业开发基本都是前后端分离架构，后端用 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，修改数据库连接、服务端口，直接复制下面代码改成自己的数据库信息就行：

yaml

server:
  # 后端占用端口，避免和前端冲突
  port: 8081
spring:
  # 数据库配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456

3. 全局跨域配置（重点）

如果不配置跨域，前端直接访问后端接口会浏览器跨域拦截，新建一个跨域配置类：

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 开发环境配置文件中，指定后端基础地址：

plaintext

VUE_APP_BASE_API = 'http://localhost:8081'

4. 配置前端代理解决跨域

修改 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 是否启动、账号密码、数据库名是否和配置文件一致。

七、结尾总结

本地部署 Java+Vue 前后端分离项目，核心逻辑就三点：一是后端配置好数据库、端口和跨域并正常启动；二是前端装完依赖、配置好环境地址和代理转发；三是两端端口不冲突，通过 /api 路径联调即可。

按照本文配置直接照搬，不用额外改复杂逻辑，新手也能一次就跑通前后端联调项目，适合日常开发学习、毕业设计、课程项目使用。