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与vbscript数据共享
Jan 09 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue打包后显示空白正确处理方法
2017/11/01 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python切换pip安装源的方法详解
2016/11/18 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python实现简单图片物体标注工具
2019/03/18 Python
python定位xpath 节点位置的方法
2019/08/27 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
高三学习决心书
2014/03/11 职场文书
家长会学生演讲稿
2014/04/26 职场文书
端午节活动总结
2014/08/26 职场文书
教育见习报告范文
2014/11/03 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle