前后端分离模式下后端 Spring Boot 集成前端 Vue 的一种解决方案

前后端分离已经是当下非常常见的一种开发模式。相较于传统的开发模式,前后端分离能够将前后端解耦,这意味着无论是开发、测试还是部署等任意阶段都能独立进行,极大地提升了研发的效率,并且增加了系统的灵活性和可维护性。

通常在这种模式下,前后端是分离在各自独立的项目中的,部署的时候也是分别部署。但是有时候我们想要将前端整合到 Spring Boot 中进行打包部署。比如项目比较小,分离部署成本高等情况。再者,我们开发的时候,后端同学可能只需要关注后端的设计实现,而不需要去搭建前端项目。

以我自己开发的一款 Dubbo 接口测试工具为例。我采用了前后端分离的开发模式,共有两个项目,datt-service 是后端项目,datt-web 是 Web 前端项目。调试的时候,我就需要分别启动前端和后端,但是可能我只是想调试后端代码,却依旧不得不将前端一起启动。 为了解决上述所说的问题,我们可以将前端项目编译成静态文件,将其作为 Spring Boot 项目的静态资源。这样 Spring Boot 项目启动的时候,会自动部署前端静态资源,这样我们就可以不用单独部署前端项目,而能够专注于后端开发了。

1 前端工程设置

首先,我们可以选择将两个工程都放在同一项目文件路径下,当然也可以不选择这么做,这样只是为了方便管理。 接着我们需要设置前端的编译打包路径。

在 Vue.js 中,我们可以通过设置 vue.config.js 来设置前台代码的编译输出路径。当然我们也可以选择在package.json 中添加 --dest target/dist 来设置编译输出路径。这里我通过设置 vue.config.js 来设置编译输出路径。 然后我们执行一次编译 yarn run build,可以看到,成功在相应的路径下编译出了我们的静态文件。

2 后端工程设置

此时我们可以将刚刚编译出的前端文件拷贝到后端工程的 /resources/static 路径下。这是 Spring Boot 存放静态资源文件的路径。 启动后端 Spring Boot 项目,访问后端的地址,比如 http://localhost:8001,应该是能够正常访问的。 但是我们不可能每次都通过拷贝的方式来打包部署。这时候就可以借助 Maven 的插件 maven-reources-plugin 来代替我们刚刚手动拷贝的动作。

我们打开后端项目的 pom 文件,在其中添加 maven-reources-plugin 插件,并为插件指定了拷贝的源路径为前端工程的编译路径,目的路径就是我们后端 Spring Boot 静态资源的存放路径。这样,每次前端编译后,在后端项目执行 Maven 编译打包的时候就能自动拷贝到后端工程下了。

3 编译运行测试

我们执行 maven clean package 命令。等待命令执行结束后,可以看到前端编译的静态资源文件被成功拷贝到后端项目中。 此时启动后端项目,访问 http://localhost:8001 应该同样能够访问成功。至此,我们已经成功将 Vue.js 集成到 Spring Boot 项目中了。

相关推荐
考虑考虑21 小时前
Jpa使用union all
java·spring boot·后端
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
阿杆1 天前
同事嫌参数校验太丑,我直接掏出了更优雅的 SpEL Validator
java·spring boot·后端
昵称为空C2 天前
SpringBoot3 http接口调用新方式RestClient + @HttpExchange像使用Feign一样调用
spring boot·后端
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js