Spring Boot 3 + Vue 3 前后端分离项目启动指南

基于最新技术栈的前后端分离项目快速启动指南。

🛠️ 环境准备

版本要求

• Java 21 LTS

• Node.js 22+

• Maven 3.9+

• Spring Boot 3.2+

• Vue 3.4+ + Vite 5.0+

环境检查

java -version    # 确认 Java 21
node -v          # 确认 Node.js 22+
mvn -version     # 确认 Maven 3.9+

[图片描述：终端显示环境版本检查结果]

🚀 后端启动 (Spring Boot 3)

1. 项目结构

backend/
├── src/main/java/
├── src/main/resources/
├── pom.xml
└── application.yml

2. 关键配置

pom.xml 核心配置：

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

<properties>
    <java.version>21</java.version>
</properties>

application.yml：

server:
  port: 8080
  servlet:
    context-path: /api

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/your_db
    username: root
    password: 123456

[图片描述：IntelliJ IDEA 显示配置文件]

3. 启动方式

IDE 启动：

• 打开主启动类，点击绿色运行按钮

命令行启动：

cd backend
mvn spring-boot:run

启动成功标志：

Started Application in 2.345 seconds (process running for 3.123)
🚀 后端服务启动成功！端口：8080

[图片描述：控制台显示启动成功信息]

🎨 前端启动 (Vue 3 + Vite)

1. 创建项目

npm create vue@latest frontend
cd frontend

2. 核心配置

vite.config.js：

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

package.json：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "axios": "^1.6.0"
  }
}

[图片描述：VS Code 显示 Vite 配置文件]

3. 启动步骤

cd frontend

# 安装依赖 (推荐使用 pnpm)
pnpm install

# 启动开发服务器
pnpm dev

启动成功输出：

VITE v5.0.0  ready in 326 ms
➜  Local:   http://localhost:5173/

[图片描述：终端显示 Vite 启动成功]

🔗 前后端联调

验证连通性

1. 后端：访问 http://localhost:8080/api/health

2. 前端：访问 http://localhost:5173

3. 检查浏览器开发者工具 Network 面板，确认 API 请求正常

[图片描述：浏览器开发者工具显示 API 请求成功]

🐛 常见问题

端口占用

# 查看端口占用
netstat -ano | findstr :8080
netstat -ano | findstr :5173

# 杀死进程
taskkill /PID <PID> /F

跨域问题

• 确保后端 CORS 配置包含前端端口 5173

• 确保 Vite 代理配置正确

Java 版本问题

# 设置 JAVA_HOME
export JAVA_HOME=/path/to/java21

📋 启动检查清单

• Java 21 环境正确

• Node.js 22+ 安装完成

• 数据库服务启动

• 后端端口 8080 可用

• 前端端口 5173 可用

• 跨域配置正确

• API 接口可正常访问

[图片描述：项目成功运行的最终界面截图]

按照以上步骤，你的现代化前后端分离项目就能快速启动了！Vite 的热重载和 Spring Boot 3 的快速启动让开发体验更加顺畅。