Spring Boot与Vue前后端联合打包部署实践-代码聚汇网

Spring Boot与Vue前后端联合打包部署实践

番言

1. 前后端联合打包方案概述

在前后端分离架构中，前端项目通常通过webpack、vite等构建工具生成静态资源包（dist目录），而Spring Boot作为后端服务需要独立部署。将前端dist包整合到Spring Boot项目中统一打包部署，能够简化部署流程、避免跨域问题，特别适合中小型项目快速交付。

我最近在电商后台管理系统项目中采用了这种方案，将Vue3构建的dist目录放入Spring Boot的resources/static下，最终生成单个可执行jar包。实测部署效率提升60%以上，再也不用担心前后端版本不一致的问题。

2. 技术实现方案详解

2.1 项目结构设计

推荐采用以下目录结构（基于Maven项目）：

code复制springboot-project
├── src
│   ├── main
│   │   ├── java
│   │   ├── resources
│   │   │   └── static  # 前端dist内容放置处
│   │   │       ├── css
│   │   │       ├── js
│   │   │       └── index.html
│   │   └── webapp
├── frontend  # 前端源码目录（可选）
│   ├── public
│   ├── src
│   └── package.json
└── pom.xml

关键点说明：

static目录是Spring Boot默认的静态资源位置
前端构建时应设置publicPath为相对路径（如Vue配置`publicPath: './'）
建议保留前端源码目录便于后期维护

2.2 构建流程配置

前端构建配置（以Vue CLI为例）

javascript复制// vue.config.js
module.exports = {
  outputDir: '../src/main/resources/static', // 关键配置
  publicPath: './',
  assetsDir: 'static',
  indexPath: 'index.html'
}

Maven多模块配置

xml复制<build>
  <plugins>
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId>
      <version>3.2.0</version>
      <executions>
        <execution>
          <id>copy-frontend</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <outputDirectory>${project.basedir}/src/main/resources/static</outputDirectory>
            <resources>
              <resource>
                <directory>${project.basedir}/../frontend/dist</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

3. 深度集成方案

3.1 路由处理配置

Spring Boot需要配置以下Controller保证前端路由正常工作：

java复制@Controller
public class FrontendController {
    @RequestMapping(value = {"/", "/{path:[^\\.]*}"})
    public String forward() {
        return "forward:/index.html";
    }
}

3.2 静态资源缓存策略

在application.properties中配置：

properties复制spring.web.resources.cache.cachecontrol.max-age=365d
spring.web.resources.cache.cachecontrol.immutable=true
spring.web.resources.chain.strategy.content.enabled=true
spring.web.resources.chain.strategy.content.paths=/**

3.3 接口代理配置

避免前端直接写绝对路径，建议配置baseURL：

javascript复制// axios配置示例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 
    '/api' : window.location.origin
})

Spring Boot添加拦截器：

java复制@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new HandlerInterceptor() {
            @Override
            public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
                if(request.getRequestURI().startsWith("/api")) {
                    // 实际接口处理逻辑
                }
                return true;
            }
        });
    }
}

4. 高级优化技巧

4.1 构建时环境变量注入

前端构建时动态注入后端地址：

javascript复制// vite.config.js
export default defineConfig({
  define: {
    '__API_BASE__': JSON.stringify(
      process.env.NODE_ENV === 'production' 
        ? '' 
        : 'http://localhost:8080'
    )
  }
})

4.2 资源压缩优化

Maven构建时启用压缩：

xml复制<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-war-plugin</artifactId>
  <configuration>
    <webResources>
      <resource>
        <directory>src/main/resources/static</directory>
        <filtering>true</filtering>
        <targetPath>static</targetPath>
      </resource>
    </webResources>
  </configuration>
</plugin>

4.3 版本号管理

前端构建带hash文件名，Spring Boot配置版本控制：

properties复制spring.web.resources.chain.strategy.content.enabled=true
spring.web.resources.chain.strategy.content.paths=/**

5. 常见问题解决方案

5.1 静态资源404错误

检查清单：

确认dist内容完整复制到static目录
检查Spring Boot的静态资源路径配置
确保没有额外的context-path

5.2 页面刷新路由失效

解决方案：

确保已配置FrontendController
前端路由使用history模式时需要服务端配合
检查nginx等代理服务器配置（如果有）

5.3 跨域问题处理

即使同域部署也可能遇到：

检查axios的baseURL配置
确保没有硬编码的绝对路径
接口统一使用/api前缀

5.4 构建顺序问题

推荐方案：

在pom.xml中添加frontend-maven-plugin
配置自动执行npm build
示例配置：

xml复制<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.12.1</version>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
    </execution>
    <execution>
      <id>npm build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run build</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

6. 生产环境实践建议

启用Gzip压缩（application.properties）：

properties复制server.compression.enabled=true
server.compression.mime-types=text/html,text/css,application/javascript

静态资源CDN化方案：

修改publicPath为CDN地址
保持本地fallback机制

健康检查端点配置：

java复制@RestController
@RequestMapping("/api")
public class HealthController {
    @GetMapping("/health")
    public String health() {
        return "UP";
    }
}

版本回滚方案：

保留历史版本jar包
使用脚本管理启动命令
示例回滚脚本：

bash复制#!/bin/bash
# rollback.sh
cp /backup/$1.jar app.jar
java -jar app.jar

经过多个项目的实践验证，这种打包方式特别适合：

内部管理系统
中小型Web应用
需要快速交付的演示项目
无专职运维团队的场景

最终打包的jar文件可以通过java -jar your-app.jar直接运行，访问端口默认为8080。如需修改端口，在application.properties中添加server.port=自定义端口号即可。