SpringBoot+Vue 前后端合并部署的配置方法
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
前后端分离开发项目
前端vue项目
服务端springboot项目
如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务。
前端项目执行npm run build
命令进行打包,会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下,如下图
此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图:
对应的springboot:application.yml需添加:
server: port: 8080 tomcat: uri-encoding: UTF-8 spring: application: name: "xxxx" servlet: application-display-name: myProject mvc: static-path-pattern: /static/**
为了解决vue-router路由的路径无法正常解析
将vue-router中的路径加上统一的前缀“/vueXX
”(自定义),然后在springboot项目中自定义过滤器,拦截带“/vueXX
”的路径,将请求转发到“/index.html
”(将vue的路由资源交给路由处理)。
启动类中需添加:
public class MyProJect { public static void main(String[] args) { SpringApplication.run(MyProJect.class,args); } @Bean public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){ return factory -> { ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/static/index.html"); factory.addErrorPages(error404Page); }; } }
如果在项目中配置了过滤器:需要在过滤器中去除对应的资源文件后缀的过滤条件。
配置至此,启动项目应该是可以访问到页面。可以在浏览器打开调试工具,查看NetWork下的请求地址是否成功再进行排查。
到此这篇关于SpringBoot+Vue 前后端合并部署的文章就介绍到这了,更多相关SpringBoot+Vue 合并部署内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间