Spring Boot整合Vue实现前后端单jar部署方案

1. 项目背景与核心需求最近在重构公司一个老项目时遇到了前后端分离部署带来的协作效率问题。前端用Vue打包生成的dist需要单独部署到Nginx而后端是Spring Boot服务。每次联调测试时前端同学改个CSS样式都得重新部署一次Nginx后端接口有变动也得单独发版双方就像在玩打地鼠游戏。于是我们开始思考能否把前端静态资源直接打包进Spring Boot的jar包里这样就能实现单jar包部署运维同事狂喜接口和页面版本天然一致再也不用听到你刷新下缓存试试本地开发时localhost:8080直接访问告别CORS报错2. 技术方案选型2.1 资源存放位置选择经过对比三种常见方案我们最终选择了resources/static方案方案优点缺点resources/publicSpring Boot默认静态目录可能和已有API路径冲突resources/static优先级高于public需要手动配置资源映射resources/META-INF/resources兼容性最好目录结构较深维护不便关键配置示例// 防止静态资源被拦截 Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/**) .addResourceLocations(classpath:/static/); }2.2 构建工具集成2.2.1 Maven方案在pom.xml中添加frontend-maven-pluginplugin groupIdcom.github.eirslett/groupId artifactIdfrontend-maven-plugin/artifactId version1.12.1/version executions execution idinstall node and npm/id goals goalinstall-node-and-npm/goal /goals configuration nodeVersionv16.14.2/nodeVersion /configuration /execution execution idnpm install/id goals goalnpm/goal /goals phasegenerate-resources/phase /execution execution idnpm build/id goals goalnpm/goal /goals phasegenerate-resources/phase configuration argumentsrun build/arguments /configuration /execution /executions /plugin2.2.2 Gradle方案对于Gradle用户可以使用com.moowork.node插件plugins { id com.moowork.node version 1.3.1 } task appNpmInstall(type: NpmTask) { args [install] } task appNpmBuild(type: NpmTask) { args [run, build] } processResources.dependsOn appNpmBuild appNpmBuild.dependsOn appNpmInstall3. 完整实现流程3.1 前端项目改造修改vue.config.jsmodule.exports { publicPath: process.env.NODE_ENV production ? / : /, outputDir: ../backend/src/main/resources/static, indexPath: index.html, assetsDir: assets }解决路由冲突问题const router new VueRouter({ mode: history, base: process.env.BASE_URL, routes })重要提示一定要设置正确的publicPath否则会出现JS/CSS资源4043.2 后端项目调整添加统一入口控制器Controller public class FrontendController { GetMapping(value { /, /login, /dashboard/** // 所有前端路由路径 }) public String forward() { return forward:/index.html; } }配置静态资源缓存可选# application.properties spring.resources.cache.cachecontrol.max-age86400 spring.resources.cache.cachecontrol.no-cachefalse3.3 构建流程优化我们设计了多环境构建方案profiles profile iddev/id activation activeByDefaulttrue/activeByDefault /activation properties frontend.envdevelopment/frontend.env /properties /profile profile idprod/id properties frontend.envproduction/frontend.env /properties /profile /profiles对应前端package.jsonscripts: { build: vue-cli-service build --mode ${frontend.env} }4. 常见问题与解决方案4.1 资源加载404问题典型症状页面能打开但JS/CSS加载失败控制台报错Failed to load resource排查步骤检查jar包内容jar tvf target/xxx.jar | grep static确认资源路径是否正确检查Spring Security配置是否放行静态资源4.2 路由刷新白屏解决方案Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{spring:\\w}) .setViewName(forward:/); registry.addViewController(/**/{spring:\\w}) .setViewName(forward:/); } }4.3 性能优化技巧开启Gzip压缩server.compression.enabledtrue server.compression.mime-typestext/html,text/css,application/javascript使用版本号控制缓存// vue.config.js configureWebpack: { output: { filename: js/[name].[hash:8].js, chunkFilename: js/[name].[hash:8].js } }5. 进阶实践5.1 动态配置方案有时候我们需要根据环境动态配置API地址// 在public目录下创建config.js window._env_ { API_URL: http://localhost:8080/api }; // 后端动态替换 Controller public class ConfigController { GetMapping(/config.js) public String getConfig(HttpServletRequest request) { return window._env_ JSON.toJSONString(config) ;; } }5.2 灰度发布方案通过Spring Boot的Profile实现AB测试Profile(!prod) Controller public class NewVersionController { GetMapping(/new-feature) public String newFeature() { return forward:/new-version/index.html; } }6. 监控与维护6.1 版本健康检查添加端点检查前端资源版本RestController RequestMapping(/api/version) public class VersionController { GetMapping public String getVersion() { try { Resource resource new ClassPathResource(static/version.txt); return StreamUtils.copyToString(resource.getInputStream(), StandardCharsets.UTF_8); } catch (IOException e) { return unknown; } } }6.2 构建耗时优化通过缓存node_modules提升CI速度# .gitlab-ci.yml cache: key: ${CI_PROJECT_ID} paths: - node_modules/ - frontend/node_modules/实际落地这个方案后我们的部署流程从原来的15分钟缩短到3分钟联调效率提升60%。不过要注意的是这种架构适合中小型项目对于超大型前端应用可能还是需要独立部署。