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出现页面空白问题的解决方案，希望对大家有所帮助