SpringBoot + Vue 前后端分离从 0 到 1 完整环境配置流程

整体分四大块：后端 Java 环境、前端 Node 环境、数据库、IDE 工具、项目创建 & 联调配置

目录

一、统一前置工具安装

[二、后端 SpringBoot 项目环境搭建（从 0 创建）](#二、后端 SpringBoot 项目环境搭建（从 0 创建）)

[三、前端 Vue 项目环境搭建（Vue3 + Vite 主流）](#三、前端 Vue 项目环境搭建（Vue3 + Vite 主流）)

四、前后端联调完整流程

五、打包部署环境简要

---

一、统一前置工具安装

1. JDK（SpringBoot 后端核心）

版本选择

• SpringBoot 3.x：JDK17+（推荐 JDK17 LTS）
• SpringBoot 2.x：JDK8 / JDK11（老项目兼容）

安装 & 环境变量配置

1. 下载对应 JDK，解压 / 安装到无中文、无空格路径

2. 系统环境变量：

   • JAVA_HOME：JDK 根目录
   • Path：新增 %JAVA_HOME%\bin

3. 验证：cmd 输入

   java -version
   javac -version

2. Maven（后端依赖管理，SpringBoot 默认）

版本匹配

Maven 3.6+ 适配 JDK8；Maven3.8 + 适配 JDK17

1. 解压 Maven，配置环境变量 MAVEN_HOME，Path 添加%MAVEN_HOME%\bin

2. 核心配置 conf/settings.xml（企业标配）

   • 本地仓库路径 <localRepository> 自定义
   • 配置阿里云镜像加速依赖下载
   aliyunmaven central https://maven.aliyun.com/repository/public

3.验证： mvn -v

3. Node.js + npm（Vue 前端环境）

版本选择

• Vue2：Node 14~16
• Vue3（Vite）：Node 16.14+ / 18 LTS（推荐 Node18）

1. 安装 Node，自带 npm；安装时勾选自动配置环境变量

2. 切换淘宝镜像（提速）

   npm config set registry https://registry.npmmirror.com
   npm config get registry # 验证

3.验证

node -v
npm -v

4. 数据库（二选一，通用标准）

方案 A：MySQL（最常用）

1. MySQL 8.0（推荐，SpringBoot3 原生适配）
2. 配置：开启 3306 端口、设置 root 密码、创建项目专用库
3. 可视化工具：Navicat / DBeaver

方案 B：PostgreSQL（新项目微服务常用）

端口 5432，同理安装客户端工具

5. IDE 开发工具

• 后端：IntelliJ IDEA（社区 / 旗舰版）
• 前端：VS Code，安装插件：Vetur/Volar、Vue VSCode Snippets、ESLint
• 接口调试：Postman / Apifox

---

二、后端 SpringBoot 项目环境搭建（从 0 创建）

1. 项目初始化（两种方式）

1. 官网生成：start.spring.io
2. IDEA 内置 Spring Initializr 创建

基础依赖必选（标准前后端分离项目）

• Spring Web：接口开发
• Spring Data JPA / MyBatis-Plus：数据库操作
• MySQL Driver / PostgreSQL Driver：数据库驱动
• Lombok：简化实体类代码，@Data、@NoArgsConstructor、@AllArgsConstructor注解 就不用再写get和set方法了
• Spring Validation：参数校验
• Spring DevTools：热部署（开发用）

pom.xml 核心依赖（SpringBoot3 + MyBatis-Plus）

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.0</version>
    <relativePath/>
</parent>

<dependencies>
    <!-- web接口 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 数据库 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <!-- mybatis-plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.5</version>
    </dependency>
    <!-- mysql驱动 -->
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
    <!-- lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <!-- 热部署 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <!-- 参数校验 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
</dependencies>

2. 后端核心配置文件（application.yml）

标准分离项目三层配置：

1. application.yml：公共配置
2. application-dev.yml：开发环境
3. application-prod.yml：生产环境

1、application.yml 公共配置

spring:
  profiles:
    active: dev
  # 全局日期格式化
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: Asia/Shanghai

mybatis-plus:
  mapper-locations: classpath:mapper/**/*.xml
  type-aliases-package: com.xxx.demo.entity
  configuration:
    map-underscore-to-camel-case: true  #下划线转驼峰
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl  #打印SQL

2、application-dev.yml 开发环境

# 服务端口
server:
  port: 8080
  servlet:
    context-path: /api # 统一接口前缀，区分前端路由

# 数据库
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/test_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
  # 热部署开启
  devtools:
    restart:
      enabled: true

3. 全局跨域配置CorsConfig.java（前后端分离必配）

新建全局跨域类，解决前端 8081/5173 访问后端 8080 跨域报错

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:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

4. 后端项目目录标准分层

   src/main/java/com/demo
   ├── config // 配置类：跨域、MyBatis、全局异常
   ├── controller // 接口控制器（对外暴露api）
   ├── service // 业务逻辑层
   │ └── impl // service实现类
   ├── mapper // 数据库DAO层
   ├── entity // 数据库实体
   ├── dto // 接收前端参数、返回数据封装
   ├── util // 工具类
   └── DemoApplication.java // 启动类

优化：

统一返回工具 Result.java

import lombok.Data;

@Data
public class Result<T> {
    private Integer code;
    private String msg;
    private T data;

    // 成功
    public static <T> Result<T> success(T data) {
        Result<T> r = new Result<>();
        r.setCode(200);
        r.setMsg("操作成功");
        r.setData(data);
        return r;
    }
    public static <T> Result<T> success() {
        return success(null);
    }

    // 失败
    public static <T> Result<T> fail(Integer code, String msg) {
        Result<T> r = new Result<>();
        r.setCode(code);
        r.setMsg(msg);
        return r;
    }
    public static <T> Result<T> fail(String msg) {
        return fail(500, msg);
    }
}

全局异常处理器 GlobalExceptionHandler.java

import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public Result<?> handleException(Exception e) {
        e.printStackTrace();
        return Result.fail(e.getMessage());
    }
}

---

三、前端 Vue 项目环境搭建（Vue3 + Vite 主流）

1. 创建 Vue 项目

   Vite创建Vue3项目（推荐）

   npm create vite@latest vue-admin -- --template vue
   cd vue-admin
   npm install
   npm run dev # 默认启动端口5173

2. 必备依赖安装

   网络请求

   npm install axios

   路由

   npm install vue-router@4

   状态管理

   npm install pinia

   UI组件库（Element Plus）

   npm install element-plus

   请求封装、时间格式化可选

   npm install dayjs

3. 核心环境配置

1）环境变量文件

新建 3 个环境文件，区分环境请求地址

• .env.development 开发环境

  VITE_API_URL = http://localhost:8080/api

• .env.production 生产环境

  VITE_API_URL = https://xxx.com/api

2）axios 请求封装（统一拦截）

创建 src/utils/request.js

• 读取环境变量统一 baseURL

• 请求拦截自动携带 localStorage token

• 响应拦截统一解析后端返回体、全局错误弹窗

• 网络 / 超时 / 后端自定义错误统一处理

• 401 未登录自动清除 token 并跳登录页

  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  import router from '@/router'

  // 创建axios实例
  const service = axios.create({
  // 后端统一接口前缀
  baseURL: import.meta.env.VITE_API_BASE_URL,
  // 超时时间 10秒
  timeout: 10000,
  // 默认请求头
  headers: {
  'Content-Type': 'application/json;charset=utf-8'
  }
  })

  // ===================== 请求拦截器 =====================
  service.interceptors.request.use(
  (config) => {
  // 从本地存储取出token，放入请求头
  const token = localStorage.getItem('token')
  if (token) {
  // 后端约定的token字段，Bearer 标准格式
  config.headers.Authorization = Bearer ${token}
  }
  return config
  },
  (error) => {
  // 请求发送前异常
  ElMessage.error('请求发送失败')
  return Promise.reject(error)
  }
  )

  // ===================== 响应拦截器 =====================
  service.interceptors.response.use(
  (response) => {
  // 后端统一返回格式 {code:200, msg:"", data:{}}
  const res = response.data

    // 成功状态码
    if (res.code === 200) {
      return res
    }
  
    // 业务失败弹窗提示
    ElMessage.error(res.msg || '操作失败')
    return Promise.reject(res)
  },
  (error) => {
    // http状态码错误：404/500/401/超时等
    let msg = ''
    const status = error.response?.status
  
    switch (status) {
      case 400:
        msg = '请求参数错误'
        break
      case 401:
        msg = '登录已失效，请重新登录'
        // 清除过期token，跳转登录页
        localStorage.removeItem('token')
        router.push('/login')
        break
      case 403:
        msg = '无权限访问'
        break
      case 404:
        msg = '接口不存在'
        break
      case 500:
        msg = '服务器内部错误'
        break
      default:
        msg = error.message.includes('timeout') ? '请求超时，请重试' : '网络连接失败'
    }
  
    ElMessage.error(msg)
    return Promise.reject(error)
  }

  )

  export default service

配套使用示例 src/api/user.js

import request from '@/utils/request'

// 登录接口（获取token）
export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

// 获取用户信息（自动携带token）
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}

登录页面存储 token 示例

const loginHandle = async () => {
  const res = await login(form)
  // 后端返回token存入本地存储
  localStorage.setItem('token', res.data.token)
  // 跳转首页
  router.push('/home')
}

3）Vite 代理配置（可选，本地开发推荐）

vite.config.js 配置代理，避免前端跨域（双重保障）

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

4. Vue 项目标准目录

   src
   ├── api // 所有后端接口请求封装
   ├── components // 公共组件
   ├── views // 页面视图
   ├── router // 路由配置
   ├── store // Pinia状态管理
   ├── utils // axios、工具函数
   ├── assets // 静态资源
   └── main.js // 入口文件

---

四、前后端联调完整流程

1. 启动 MySQL，创建数据库并执行建表语句
2. IDEA 打开 SpringBoot 后端，启动主类，端口 8080
3. VSCode 打开 Vue 前端，npm run dev，端口 5173
4. 前端通过 axios 请求 VITE_API_URL 调用后端 /api 接口
5. 测试接口：Apifox 先调通后端接口，再用前端页面访问验证

五、打包部署环境简要

1. 后端打包：mvn clean package -Dmaven.test.skip=true，生成 jar 包
2. 前端打包：npm run build，生成 dist 静态文件
3. 部署：jar 包服务器运行；dist 丢 Nginx 反向代理，Nginx 转发 /api 到后端服务