網上流行的解決方案是將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)
})
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
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: '../../'
})
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
結尾附上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);
};
}
}