Vue项目部署在Spring Boot出现页面空白问题的解决方案


Posted in Javascript onNovember 26, 2018

网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端:

通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path,上下文改变了css, js等文件的访问路径,文件无法加载导致index.html显示空白。'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot端上下文的改变,这是为什么这个解决方案起作用的原因。

Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误,解决的方案基本是把error page配置成为Vue的index.html。

这两个解决方案有冲突的地方,当router出现子路径的时候刷新浏览器,error page会指向Vue的index.html页面,此时页面中访问css,js文件的路径是相对路径,也就是上下文路径+router子路径,这将导致css,js再次无法正常加载,这就是相对路径的弊端。

由于router会出现子路径,因此必须保证assetsPublicPath为绝对路径,下面讲一下保持绝对路径的解决方案:

1 假设Spring Boot端配置server.servlet.context-path: api, 对应Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'

2 router/index.js中配置base: '/api/', 这是保证浏览器刷新时上下文参数和router跳转路径一致。

3 对于Ajax请求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置

// http request 拦截器
Axios.interceptors.request.use(
config => {
if (localStorage.getItem('id_token')) {
config.headers.Authorization = localStorage.getItem('id_token')
}
config.baseURL = '/api'
return config
},
err => {
return Promise.reject(err)
})

4 另外需要注意的一点,按照Spring Boot默认配置, 在Vue端/config/index.js中assetsSubDirectory: 'static'要改变为其它字符,比如:'content', 'vue', 'api'等等。

5 试过将assetsSubDirectory配置为空,它和另一个css图片加载的方案有冲突,图片加载解决方案是在/build/util.js中加一行配置

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})

结尾附上Spring Boot端将error page指向Vue的index.html代码:

import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.web.server.ConfigurableWebServerFactory;
 import org.springframework.boot.web.server.ErrorPage;
 import org.springframework.boot.web.server.WebServerFactoryCustomizer;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.http.HttpStatus;
 @Configuration
 public class ServletConfig {
   private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
   @Bean
   public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
     logger.info("come to 404 error page");
     return factory -> {
       ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
       factory.addErrorPages(error404Page);
     };
  }
 }

总结:

以上所述是小编给大家介绍的Vue项目部署在Spring Boot出现页面空白问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
AngularJS实现表单验证
Jan 28 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
web前端vue filter 过滤器
Jan 12 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
Vue中的methods、watch、computed的区别
Nov 26 #Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
You might like
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
异步加载script的代码
2011/01/12 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
整理Python中的赋值运算符
2015/05/13 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
Java面试笔试题大全
2016/11/23 面试题
工商企业管理应届生求职信
2014/05/04 职场文书
关爱老人标语
2014/06/21 职场文书
企业计划生育责任书
2015/05/09 职场文书
装修公司管理制度
2015/08/05 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
python模板入门教程之flask Jinja
2022/04/11 Python