Vue下路由History模式打包后頁面空白的解決方法
vue的路由在默認(rèn)的hash模式下,默認(rèn)打包一般不會有什么問題,不過hash模式由于url會帶有一個#,不美觀,而且在微信分享,授權(quán)登錄等都會有一些坑.所以history模式也會有一些應(yīng)用場景.新手往往會碰到history模式打包后頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.
這個其實仔細(xì)研究下會發(fā)現(xiàn),如果項目直接放的跟目錄, 那么是沒有問題的,如果是子目錄,那么就會一片空白了.這個vue官方有解釋,需要加一個base
// base: '/history', // mode: 'history',
這個base即為項目路徑.
以上兩個都解決了,還是會發(fā)現(xiàn),此時只有首頁能訪問,通過首頁點進(jìn)去其他路由也是可以的,但是如果在其他路由刷新就有錯誤了,這個懂history模式的也應(yīng)該知道,history模式是h5 api的 history.pushState,相對于是瀏覽器模擬了一條歷史,而真正服務(wù)器上沒有這個路徑資源,為什么hash模式不存在這個問題呢?hash模式是帶#,這個服務(wù)器不會解析,相對于還是返回html而已,index.html會根據(jù)vue路由去解析,而history模式則會請求服務(wù)器上的此地址,服務(wù)器上沒有相關(guān)路徑就會報錯了,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 的路徑
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用rem實現(xiàn) 移動端屏幕適配的相關(guān)知識，通過實例代碼介紹了vue用rem布局的實現(xiàn)代碼,需要的朋友可以參考下2018-09-09
vue中g(shù)et請求如何傳遞數(shù)組參數(shù)的方法示例
這篇文章主要介紹了vue中g(shù)et請求如何傳遞數(shù)組參數(shù)的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中如何實現(xiàn)pdf文件預(yù)覽的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue3如何采用 App.vue定義全局變量與方法并實現(xiàn)局部頁面刷新效果,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-01-01
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue3中的Refs和Ref，文章圍繞Vue3中的Refs和Ref得相關(guān)資料應(yīng)用舉例煩人方式展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue.js 無限滾動列表性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3中的setup一種是setup函數(shù),一種是script setup,這篇文章主要給大家介紹了關(guān)于Vue3?-?setup?script使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下2022-09-09