SpringBoot整合VUE源码打包成jar部署——解决步骤和踩坑记录

一、前言

项目是前后端分离的springboot+vue，之前都是前后端分开部署的，前端打成dist，后端打成war包部署到tomcat。突然项目来个需求，需要将前端的vue整合到后端的springboot打包成jar包部署，鄙人才疏学浅一时间不知如何处理，只能网上找各种资料。期间踩了很多坑，最后总算是解决了。

二、解决的步骤

1、vue打包放到spingboot项目下面

首先vue打成dist包，发给后端的我，我把这个包放在resources的static目录下，目录结构如下

 

2、配置拦截器，映射静态资源

这里有两种方法，第一种可以继承WebMvcConfigurerAdapter，然后重写addResourceHandlers方法，第二种可以直接实现WebMvcConfigurer接口，然后重写addInterceptors来添加拦截器，需要注意的是，springboot2.+默认是静态文件的路径就有/resources/static，所以这里如果是springboot2.+其实不用配置也是可以的。

第一种方法：

第二种方法，可以省略：

 

3、处理静态资源路径问题

上面配置好之后，我们本地启动服务，按理说是可以访问页面的，但是我们打开页面发现页面是可以访问，但是静态资源全是404，首先我们看静态资源路径少了个后台项目名称的前缀，导致404，我们加上之后就可以。不过要在静态资源前加这个项目名称，只能是前端加，所以每个引用到静态资源的地方都要加这个项目名称，这样其实比较麻烦。所以能不能在一个地方就配置这个呢，或者能不能不加这个项目名称呢？后来发现其实我们可以在后台配置服务器路径的地方，把这个项目名称去掉就好，这样就不用再去改静态资源的路径。还有一个方法好像可以在vue构建时候路由里base里面加项目名称，这个我没试过。网上很少有提到这个问题的，所以也算是踩坑了

 

4、解决index.html404问题

静态资源可以访问了，按理说页面是可以打开了吧，然鹅并没有。我们访问index.html发现直接跳转到404了，这个地方一开始我们以为是后台没有处理404这个页面的跳转，所以我在后台加了这个，把错误页处理设置成我们的首页：

这样可以了吧，一打开还是不行，还是404，后来我们发现这个404其实是前端路由处理的，前端路由没有处理index.html跳转到login登录页，这样页面会直接跳到404

问题知道了，那我们在路由那加一个index.html跳转到login就可以了。

 

5、解决刷新页面不能访问问题

现在login页面可以打开了，登录也可以登录了，然后又发现只要刷新一下页面，就直接跳到404，或者直接跳到后台接口地址了。404是因为前端路由没有匹配到这个路径，就会跳转到404。跳到后台接口是因为前端页面和后台的接口起冲突了，比如前端页面路径是login，后台接口也是login，这样如果访问login肯定判断的进入后台的地址。

怎么解决呢？

我们的方法是这样：springboot里面随便加一个路径，让他放行，比如/redirect/**，我们在后台的secuity配置让他无授权访问，把这个路径交给前端处理，vue构建时候路由里base也改成/redirect/，这样访问前端的项目以及刷新，只要是前缀带/redirect/都会被匹配到前端的路由。

6、整合用maven打成jar包

以上步骤之后，页面打开没问题，刷新页面也没有问题，最后测试接口访问也没问题。现在只需要后端打成把spirngboot+vue打成jar包就可以了。pom配置如下：

这里打包的时候遇到本地jar打包过后无法引用的问题，加这个就可以。

<includeSystemScope>true</includeSystemScope>

还有打成jar包后运行出现bean循环调用的问题The dependencies of some of the beans in the application context form a cycle，

通过检查代码修改一下即可。

打好的jar包，直接用命令行java -jar jar包路径 运行就可以了。

至此，大功告成！

 

三、总结

1、SpingBoot2.+的静态资源映射路径可以不用配置，默认的就可以。

因为，Spring Boot 对静态资源映射提供了默认配置，默认将 /** 所有访问映射到以下目录：

classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

2、静态资源访问不了的问题，可以直接在SpringBoot的服务器配置里面把服务名称去掉，这样直接用IP+端口号访问前端页面，至于在前端加服务名称的方式没有试过，不知道可不可以。

3、刷新页面地址找不到的问题，可以让前后端约定一个路径前缀，让后端抛出这个路径给前端，前端设置路由进行处理。

 

原创不易，转载请注明出处！

参考文章：

Spring Boot整合Vue，解决静态资源映射，页面刷新失效，路径配置等问题：https://blog.csdn.net/godelgnis/article/details/89683760

springboot中集成vue项目,vue项目路由history模式不能刷新和输入url访问问题：https://blog.csdn.net/zxw75192/article/details/84371951