在SpringBoot中部署Vue項目時出現(xiàn)頁面空白如何解決-創(chuàng)新互聯(lián)

這篇文章給大家介紹在Spring Boot中部署Vue項目時出現(xiàn)頁面空白如何解決，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在寧洱等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站設(shè)計制作按需制作網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計,營銷型網(wǎng)站建設(shè),外貿(mào)營銷網(wǎng)站建設(shè),寧洱網(wǎng)站建設(shè)費(fèi)用合理。

解決方案是將assetsPublicPath: '/'改成'./'，下面說一下這個解決方案的弊端：

通常頁面空白的問題出現(xiàn)大多數(shù)是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問路徑，文件無法加載導(dǎo)致index.html顯示空白。'/'改成'./'是將絕對路徑變?yōu)橄鄬β窂?，可以動態(tài)適應(yīng)Spring Boot端上下文的改變，這是為什么這個解決方案起作用的原因。

Vue項目部署在Spring Boot出現(xiàn)的另一個常見問題是當(dāng)刷新瀏覽器的時候出現(xiàn)white label, 也就是404錯誤，解決的方案基本是把error page配置成為Vue的index.html。

這兩個解決方案有沖突的地方，當(dāng)router出現(xiàn)子路徑的時候刷新瀏覽器，error page會指向Vue的index.html頁面，此時頁面中訪問css,js文件的路徑是相對路徑，也就是上下文路徑+router子路徑，這將導(dǎo)致css,js再次無法正常加載，這就是相對路徑的弊端。

由于router會出現(xiàn)子路徑，因此必須保證assetsPublicPath為絕對路徑，下面講一下保持絕對路徑的解決方案：

1 假設(shè)Spring Boot端配置server.servlet.context-path： api, 對應(yīng)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 另外需要注意的一點(diǎn)，按照Spring Boot默認(rèn)配置，在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);
     };
  }
 }

關(guān)于在Spring Boot中部署Vue項目時出現(xiàn)頁面空白如何解決就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

名稱欄目：在SpringBoot中部署Vue項目時出現(xiàn)頁面空白如何解決-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.muchs.cn/article18/dhosdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、微信公眾號、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容