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

 更新时间:2018年11月26日 11:24:10   作者:java_augur  
这篇文章主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

网上流行的解决方案是将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出现页面空白问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    vue实现页面内容禁止选中功能,仅输入框和文本域可选

    今天小编就为大家分享一篇vue实现页面内容禁止选中功能,仅输入框和文本域可选,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中v-if失效原因及解决方法

    vue中v-if失效原因及解决方法

    本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下
    2023-09-09
  • Vue ElementUi同时校验多个表单(巧用new promise)

    Vue ElementUi同时校验多个表单(巧用new promise)

    这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能,实现的方法有很多种,本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下
    2018-06-06
  • 如何利用vue实现登陆界面及其跳转详解

    如何利用vue实现登陆界面及其跳转详解

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,下面这篇文章主要给大家介绍了关于如何利用vue实现登陆界面及其跳转的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识,本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下
    2018-09-09
  • vue3 emits事件使用示例详解

    vue3 emits事件使用示例详解

    这篇文章主要为大家介绍了vue3 emits事件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue实现轮播图组件的封装

    Vue实现轮播图组件的封装

    Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现,主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能,实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术
    2023-04-04
  • vue绑定设置属性的多种方式(5)

    vue绑定设置属性的多种方式(5)

    这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue更新数据却不渲染页面的解决

    vue更新数据却不渲染页面的解决

    这篇文章主要介绍了vue更新数据却不渲染页面的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3实现多层级列表的项目实践

    vue3实现多层级列表的项目实践

    本文主要介绍了vue3实现多层级列表的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论