網(wǎng)上流行的解決方案是將assetsPublicPath: '/'改成'./'，下面說一下這個解決方案的弊端：
通常頁面空白的問題出現(xiàn)大多數(shù)是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問路徑，文件無法加載導致index.html顯示空白。'/'改成'./'是將絕對路徑變?yōu)橄鄬β窂剑梢詣討B(tài)適應Spring Boot端上下文的改變，這是為什么這個解決方案起作用的原因。
Vue項目部署在Spring Boot出現(xiàn)的另一個常見問題是當刷新瀏覽器的時候出現(xiàn)white label, 也就是404錯誤，解決的方案基本是把error page配置成為Vue的index.html。
這兩個解決方案有沖突的地方，當router出現(xiàn)子路徑的時候刷新瀏覽器，error page會指向Vue的index.html頁面，此時頁面中訪問css,js文件的路徑是相對路徑，也就是上下文路徑+router子路徑，這將導致css,js再次無法正常加載，這就是相對路徑的弊端。
由于router會出現(xiàn)子路徑，因此必須保證assetsPublicPath為絕對路徑，下面講一下保持絕對路徑的解決方案：
1 假設Spring Boot端配置server.servlet.context-path： api, 對應Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'
2 router/index.js中配置base: '/api/', 這是保證瀏覽器刷新時上下文參數(shù)和router跳轉(zhuǎn)路徑一致。
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'要改變?yōu)槠渌址热纾?#39;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: '../../'})結(jié)尾附上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); }; } }總結(jié)：
以上所述是小編給大家介紹的Vue項目部署在Spring Boot出現(xiàn)頁面空白問題的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
