這篇文章主要介紹了Vue下路由History模式打包後頁面空白，內容挺不錯的，現在分享給大家，也給大家做個參考。
vue的路由在預設的hash模式下,預設打包一般不會有什麼問題,不過hash模式由於url會帶有一個#,不美觀,而且在微信分享,授權登入等都會有一些坑.所以history模式也會有一些應用場景.新手往往會碰到history模式打包後頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.
這個其實仔細研究下會發現,如果專案直接放的跟目錄, 那麼是沒有問題的,如果是子目錄,那麼就會一片空白了.這個vue官方有解釋,需要加一個base
// base: '/history', // mode: 'history',
這個base即為專案路徑.
以上兩個都解決了,還是會發現,此時只有首頁能訪問,透過首頁點進去其他路由也是可以的,但是如果在其他路由刷新就有錯誤了,這個懂history模式的也應該知道,history模式是h5 api的history.pushState,相對於是瀏覽器模擬了一條歷史,而真正伺服器上沒有這個路徑資源,為什麼hash模式不存在這個問題呢?hash模式是帶#,這個伺服器不會解析,相對於還是返回html而已,index.html會根據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 的路徑
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
#
以上是如何解決Vue下路由History模式打包後頁面空白的詳細內容。更多資訊請關注PHP中文網其他相關文章！
