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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
列举Python中吸引人的一些特性
2015/04/09 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
基于python实现高速视频传输程序
2019/05/05 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python保留小数位的三种实现方法
2020/01/07 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
服务员岗位职责
2015/02/03 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
赢在中国观后感
2015/06/02 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python