Vue项目部署在Spring Boot出现页面空白问题的解决方案
网上流行的解决方案是将assetsPublicPath:'/'改成'./',下面说一下这个解决方案的弊端:
通常页面空白的问题出现大多数是由于SpringBoot端配置了server.servlet.context-path,上下文改变了css,js等文件的访问路径,文件无法加载导致index.html显示空白。'/'改成'./'是将绝对路径变为相对路径,可以动态适应SpringBoot端上下文的改变,这是为什么这个解决方案起作用的原因。
Vue项目部署在SpringBoot出现的另一个常见问题是当刷新浏览器的时候出现whitelabel,也就是404错误,解决的方案基本是把errorpage配置成为Vue的index.html。
这两个解决方案有冲突的地方,当router出现子路径的时候刷新浏览器,errorpage会指向Vue的index.html页面,此时页面中访问css,js文件的路径是相对路径,也就是上下文路径+router子路径,这将导致css,js再次无法正常加载,这就是相对路径的弊端。
由于router会出现子路径,因此必须保证assetsPublicPath为绝对路径,下面讲一下保持绝对路径的解决方案:
1假设SpringBoot端配置server.servlet.context-path:api,对应Vue的/config/index.js中assetsPublicPath:'/'改成'/api/'
2router/index.js中配置base:'/api/',这是保证浏览器刷新时上下文参数和router跳转路径一致。
3对于Ajax请求需要配置baseURL,如果使用Axios,可以采用如下方法在main.js中配置
//httprequest拦截器 Axios.interceptors.request.use( config=>{ if(localStorage.getItem('id_token')){ config.headers.Authorization=localStorage.getItem('id_token') } config.baseURL='/api' returnconfig }, err=>{ returnPromise.reject(err) })
4另外需要注意的一点,按照SpringBoot默认配置,在Vue端/config/index.js中assetsSubDirectory:'static'要改变为其它字符,比如:'content','vue','api'等等。
5试过将assetsSubDirectory配置为空,它和另一个css图片加载的方案有冲突,图片加载解决方案是在/build/util.js中加一行配置
//ExtractCSSwhenthatoptionisspecified //(whichisthecaseduringproductionbuild) if(options.extract){ returnExtractTextPlugin.extract({ use:loaders, fallback:'vue-style-loader', publicPath:'../../' })
结尾附上SpringBoot端将errorpage指向Vue的index.html代码:
importorg.slf4j.Logger; importorg.slf4j.LoggerFactory; importorg.springframework.boot.web.server.ConfigurableWebServerFactory; importorg.springframework.boot.web.server.ErrorPage; importorg.springframework.boot.web.server.WebServerFactoryCustomizer; importorg.springframework.context.annotation.Bean; importorg.springframework.context.annotation.Configuration; importorg.springframework.http.HttpStatus; @Configuration publicclassServletConfig{ privatestaticfinalLoggerlogger=LoggerFactory.getLogger(ServletConfig.class); @Bean publicWebServerFactoryCustomizerwebServerFactoryCustomizer(){ logger.info("cometo404errorpage"); returnfactory->{ ErrorPageerror404Page=newErrorPage(HttpStatus.NOT_FOUND,"/index.html"); factory.addErrorPages(error404Page); }; } }
总结:
以上所述是小编给大家介绍的Vue项目部署在SpringBoot出现页面空白问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!