SpringBoot+Vue 前后端合并部署的配置方法


Posted in Vue.js onDecember 30, 2020

前后端分离开发项目

前端vue项目

服务端springboot项目

如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务。

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

SpringBoot+Vue 前后端合并部署的配置方法

此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图:

SpringBoot+Vue 前后端合并部署的配置方法

对应的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 合并部署内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
You might like
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
DOM 基本方法
2009/07/18 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python 实现任务管理清单案例
2020/04/25 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
教师节横幅标语
2014/10/08 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang