溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue下路由History模式打包后頁面空白的解決方法

發(fā)布時間：2020-09-21 18:01:05 來源：腳本之家 閱讀：781 作者：勇PAN高峰 欄目：web開發(fā)

vue的路由在默認的hash模式下,默認打包一般不會有什么問題,不過hash模式由于url會帶有一個#,不美觀,而且在微信分享,授權登錄等都會有一些坑.所以history模式也會有一些應用場景.新手往往會碰到history模式打包后頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.

這個其實仔細研究下會發(fā)現(xiàn),如果項目直接放的跟目錄, 那么是沒有問題的,如果是子目錄,那么就會一片空白了.這個vue官方有解釋,需要加一個base

// base: '/history',
// mode: 'history',

這個base即為項目路徑.

以上兩個都解決了,還是會發(fā)現(xiàn),此時只有首頁能訪問,通過首頁點進去其他路由也是可以的,但是如果在其他路由刷新就有錯誤了,這個懂history模式的也應該知道,history模式是h6 api的 history.pushState,相對于是瀏覽器模擬了一條歷史,而真正服務器上沒有這個路徑資源,為什么hash模式不存在這個問題呢?hash模式是帶#,這個服務器不會解析,相對于還是返回html而已,index.html會根據(jù)vue路由去解析,而history模式則會請求服務器上的此地址,服務器上沒有相關路徑就會報錯了,vue-router的官方文檔有介紹各種配置,比如ngnix的配置

 location / {
 try_files $uri $uri/ /index.html;
}

上面這個對于直接項目的根目錄是可以的,但是如果項目不是根目錄還是會有問題,

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

上面這個是項目路徑名為history,這樣配置后就不會有vue打包后頁面空白問題了,history路由也可以自由訪問了,不過要記得上面說的,非根目錄的項目需要加上base 的路徑

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手