10分钟搭建脚手架：Spring Boot 3.2 + Vue3 前后端分离模板

一、项目结构设计

my-project/
├── backend/          # Spring Boot 3.2 后端
├── frontend/         # Vue3 前端
└── docker-compose.yml # 容器化部署

二、后端搭建（Spring Boot 3.2）

1. 快速初始化（使用 Spring Initializr）

• 依赖选择：
  • Spring Web
  • Spring Data JPA
  • Lombok
  • Spring Security
  • MySQL Driver
  • Spring Boot DevTools

2. 核心配置

application.yml

server:port: 8080servlet:context-path: /apispring:datasource:url: jdbc:mysql://localhost:3306/app_db?useSSL=falseusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Driverjpa:hibernate:ddl-auto: updateshow-sql: trueproperties:hibernate.format_sql: truesecurity:oauth2:resourceserver:jwt:issuer-uri: http://localhost:8080

跨域配置 CorsConfig.java

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOriginPattern("*");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

3. 安全配置

SecurityConfig.java

@Configuration
@EnableWebSecurity
public class SecurityConfig {@Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {http.csrf().disable().authorizeHttpRequests(auth -> auth.requestMatchers("/api/auth/**").permitAll().anyRequest().authenticated()).sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS));return http.build();}
}

4. JWT认证模块

JwtUtils.java

public class JwtUtils {private static final String SECRET_KEY = "mySecretKey";private static final long EXPIRATION_TIME = 86400000; // 24小时public static String generateToken(UserDetails userDetails) {return Jwts.builder().setSubject(userDetails.getUsername()).setIssuedAt(new Date()).setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME)).signWith(SignatureAlgorithm.HS256, SECRET_KEY).compact();}public static String extractUsername(String token) {return Jwts.parser().setSigningKey(SECRET_KEY).parseClaimsJws(token).getBody().getSubject();}
}

三、前端搭建（Vue3 + Vite）

1. 创建Vue项目

npm create vite@latest frontend -- --template vue-ts
cd frontend
npm install

2. 安装必要依赖

npm install axios vue-router@4 pinia @element-plus/icons-vue
npm install -D sass

3. 项目结构优化

src/
├── api/           # API请求封装
├── assets/         # 静态资源
├── components/     # 通用组件
├── router/         # 路由配置
├── store/          # 状态管理
├── views/          # 页面组件
├── utils/          # 工具函数
└── App.vue

4. 核心配置

axios 封装 (api/index.ts)

import axios from 'axios';const api = axios.create({baseURL: import.meta.env.DEV ? 'http://localhost:8080/api' : '/api',timeout: 10000,
});// 请求拦截器
api.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});// 响应拦截器
api.interceptors.response.use(response => response.data,error => {if (error.response?.status === 401) {localStorage.removeItem('token');window.location.href = '/login';}return Promise.reject(error);}
);export default api;

路由配置 (router/index.ts)

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'Home',component: () => import('@/views/HomeView.vue'),meta: { requiresAuth: true }},{path: '/login',name: 'Login',component: () => import('@/views/LoginView.vue')}
];const router = createRouter({history: createWebHistory(),routes
});router.beforeEach((to, from, next) => {const token = localStorage.getItem('token');if (to.meta.requiresAuth && !token) {next('/login');} else {next();}
});export default router;

四、前后端联调配置

1. 开发环境代理 (Vite)

// vite.config.js
export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

2. 生产环境整合

// Spring Boot 配置 (WebMvcConfig.java)
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/static/").resourceChain(true).addResolver(new PathResourceResolver() {@Overrideprotected Resource getResource(String resourcePath, Resource location) throws IOException {Resource requestedResource = location.createRelative(resourcePath);return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");}});}
}

五、一键启动脚本

start-dev.sh (开发环境)

#!/bin/bash# 启动后端
cd backend && ./mvnw spring-boot:run &# 启动前端
cd frontend && npm run dev

build-prod.sh (生产构建)

#!/bin/bash# 构建前端
cd frontend
npm run build# 复制前端构建文件到后端
rm -rf ../backend/src/main/resources/static/*
cp -r dist/* ../backend/src/main/resources/static/# 构建后端JAR
cd ../backend
./mvnw clean package -DskipTests

六、Docker 容器化

Dockerfile (后端)

FROM openjdk:17-jdk-slim
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

docker-compose.yml

version: '3.8'services:backend:build: ./backendports:- "8080:8080"environment:SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/app_dbSPRING_DATASOURCE_USERNAME: rootSPRING_DATASOURCE_PASSWORD: rootdepends_on:db:condition: service_healthyfrontend:image: nginx:alpineports:- "80:80"volumes:- ./frontend/dist:/usr/share/nginx/htmldepends_on:- backenddb:image: mysql:8.0environment:MYSQL_ROOT_PASSWORD: rootMYSQL_DATABASE: app_dbvolumes:- mysql-data:/var/lib/mysqlhealthcheck:test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]interval: 5stimeout: 10sretries: 5volumes:mysql-data:

七、模板功能清单

1. 后端功能：
   • JWT认证
   • 统一异常处理
   • 数据验证
   • 分页查询
   • 文件上传
   • API文档 (SpringDoc OpenAPI)
2. 前端功能：
   • 响应式布局
   • 路由守卫
   • 状态管理
   • 主题切换
   • 国际化
   • 权限控制

八、性能优化配置

前端优化 (Vite)

// vite.config.js
export default defineConfig({build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor';}}}}}
})

后端优化

# application.yml
spring:jpa:properties:hibernate:jdbc:batch_size: 50fetch_size: 100order_inserts: trueorder_updates: true

九、扩展功能集成

1. 代码生成器

# 安装MyBatis Plus代码生成器
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.5.3</version>
</dependency>

2. 监控端点

management:endpoints:web:exposure:include: health,info,metrics,prometheusendpoint:health:show-details: always

十、使用说明

1. 开发模式：

./start-dev.sh

1. 生产构建：

./build-prod.sh

1. 容器部署：

docker-compose up -d --build

该模板已集成企业级开发所需的核心功能，10分钟内即可启动开发，适合作为微服务架构的基础模板。