微信小程序微店_Vue项目布置在Spring Boot呈现页面

2021-01-11 10:18

Vue项目部署在Spring Boot出现页面空白问题的解决方案       这篇文章主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端:

<显示空白。'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot端上下文的改变,这是为什么这个解决方案起作用的原因。

<。

<页面,此时页面中访问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: '../../'
})
<代码:

.slf4j.Logger;
 .slf4j.LoggerFactory;
 .springframework.boot.web.server.ConfigurableWebServerFactory;
 .springframework.boot.web.server.ErrorPage;
 .springframework.boot.web.server.WebServerFactoryCustomizer;
 .springframework.context.annotation.Bean;
 .springframework.context.annotation.Configuration;
 .springframework.http.HttpStatus;
 @Configuration
 public class ServletConfig {
 private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
 @Bean
 public WebServerFactoryCustomizer ConfigurableWebServerFactory webServerFactoryCustomizer() {
 ("come to 404 error page");
 return factory - {
 ");
 factory.addErrorPages(error404Page);
 }

总结:

以上所述是小编给大家介绍的Vue项目部署在Spring Boot出现页面空白问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!



扫描二维码分享到微信

在线咨询
联系电话

020-66889888