springbootvue前后端分离,vue+springboot前后端分离开发实战

　　本文主要介绍SpringBoot Vue前端和后端联合部署的配置方法。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。

　　前端分离开发项目

　　前端vue项目

　　服务器springboot项目

　　如何将vue的静态资源整合到springboot项目中，通过启动jar包来部署服务。

　　前端项目执行npm run build命令进行打包，会自动生成打包后的dist目录文件，并将所有东西放在Resources/static文件下，如下图所示。

　　这里index.html文件的资源路径(需要在前端打包配置中配置)应该如下：

　　需要添加相应的springboot:application.yml:

　　服务器：

　　端口：8080

　　tomcat:

　　uri编码：UTF-8

　　春天：

　　应用：

　　名称： xxxx

　　servlet:

　　应用程序显示名称：我的项目

　　mvc:

　　静态路径模式：/static/**

　　为了解决vue路由器的路由不能被正确解析的问题

　　在vue-router中为路径添加统一前缀“/vuxx”(自定义)，然后在springboot项目中自定义过滤器，用“/vuxx”拦截路径，并将请求转发到“/index.html”(将vue的路由资源留给路由进程)。

　　要开始该类，请添加：

　　公共类MyProJect {

　　公共静态void main(String[] args) {

　　spring application . run(my project . class，args)；

　　}

　　@Bean

　　公共web serverfactorycustomizerconfigurable web server factory web serverfactorycustomizer(){

　　返回工厂- {

　　error page error 404 page=new error page(http status。NOT_FOUND，/static/index . html )；

　　factory . add error pages(error 404 page)；

　　};

　　}

　　}

　　如果项目中配置了过滤器：则需要从过滤器中删除对应资源文件后缀的过滤条件。

　　此时，启动项目应该是一个可访问的页面。可以在浏览器中打开调试工具，看看网络下请求的地址是否成功，再进行故障排除。

　　这篇关于SpringBoot Vue的前端和后端合并部署的文章到此为止。有关SpringBoot Vue合并部署的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。