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

适用人群 Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后端技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前端技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后端分离的开发 数据库        Mysql5 IDE     Intellij Idea
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页