spring boot+vue 的前后端分离与合并方案实例详解

"spring boot+vue 的前后端分离与合并方案实例详解" 本文主要介绍了spring boot+vue 的前后端分离与合并方案实例详解，讨论了前后端分离与合并的必要性、前后端分离的两种方式、springboot和vue的整合操作、整合的核心问题处理等。 一、为什么做前后端分离开发合并 在传统行业中，很多项目都是以项目思想来主导的，而不是产品，一个项目会卖给很多的客户，并且部署到客户本地的机房里。在这种情况下，尽量减少部署时的服务软件需求，打出的包数量也尽量少。因此，在开发中做到前后端独立开发，整个开发方式和第二种方式是相同的，但是在后端springboot打包发布时将前端的构建输出一起打入，最后只需部署springboot的项目即可，无需再安装nginx服务器。 二、springboot和vue的整合操作 springboot和vue的整合操作实际上是将前端开发好的dist下static中的文件拷贝到springboot的resource的static下，index.html则直接拷贝到springboot的resource的static下。这种方式可以实现前后端的合并，但是作为工程级的项目开发，并不推荐使用手工合并，也不推荐将前端代码构建后提交到springboot的resouce下，好的方式应该是保持前后端完全独立开发代码，项目代码互不影响，借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包，最后就得到了一个完全包含前后端的springboot项目了。 三、整合的核心问题处理 通过上面的整合后会出现两个比较大的问题：无法正常访问静态资源和vue router路由的路径无法正常解析。解决第一个问题，我们必须重新指定springboot的静态资源处理前缀，代码：@Configurationpublic class SpringWebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/").addResourceLocations("classpath:/static/"); super.addResourceHandlers(registry); }}解决第二个问题的方式是对vue的路由的路径做rewrite，交给router来处理，而不是springboot自己处理，rewrite时可以考虑路由的路径统一增加后缀，然后在springboot中编写过滤拦截特定后缀来做请求转发交给vue的路由处理。 四、结论 spring boot+vue 的前后端分离与合并方案实例详解，提供了一种可行的解决方案，能够帮助开发者更好地进行前后端分离和合并，提高开发效率和质量。