Vue下路由History模式打包后頁面空白的解決方法
vue的路由在默認(rèn)的hash模式下,默認(rèn)打包一般不會(huì)有什么問題,不過hash模式由于url會(huì)帶有一個(gè)#,不美觀,而且在微信分享,授權(quán)登錄等都會(huì)有一些坑.所以history模式也會(huì)有一些應(yīng)用場景.新手往往會(huì)碰到history模式打包后頁面一片空白的情況,而且沒有資源加載錯(cuò)誤的報(bào)錯(cuò)信息.
這個(gè)其實(shí)仔細(xì)研究下會(huì)發(fā)現(xiàn),如果項(xiàng)目直接放的跟目錄, 那么是沒有問題的,如果是子目錄,那么就會(huì)一片空白了.這個(gè)vue官方有解釋,需要加一個(gè)base
// base: '/history', // mode: 'history',
這個(gè)base即為項(xiàng)目路徑.
以上兩個(gè)都解決了,還是會(huì)發(fā)現(xiàn),此時(shí)只有首頁能訪問,通過首頁點(diǎn)進(jìn)去其他路由也是可以的,但是如果在其他路由刷新就有錯(cuò)誤了,這個(gè)懂history模式的也應(yīng)該知道,history模式是h5 api的 history.pushState,相對(duì)于是瀏覽器模擬了一條歷史,而真正服務(wù)器上沒有這個(gè)路徑資源,為什么hash模式不存在這個(gè)問題呢?hash模式是帶#,這個(gè)服務(wù)器不會(huì)解析,相對(duì)于還是返回html而已,index.html會(huì)根據(jù)vue路由去解析,而history模式則會(huì)請(qǐng)求服務(wù)器上的此地址,服務(wù)器上沒有相關(guān)路徑就會(huì)報(bào)錯(cuò)了,vue-router的官方文檔有介紹各種配置,比如ngnix的配置
location / {
try_files $uri $uri/ /index.html;
}
上面這個(gè)對(duì)于直接項(xiàng)目的根目錄是可以的,但是如果項(xiàng)目不是根目錄還是會(huì)有問題,
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;
}
}
上面這個(gè)是項(xiàng)目路徑名為history,這樣配置后就不會(huì)有vue打包后頁面空白問題了,history路由也可以自由訪問了,不過要記得上面說的,非根目錄的項(xiàng)目需要加上base 的路徑
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
three.js實(shí)現(xiàn)vr全景圖功能實(shí)例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過一點(diǎn)全景相關(guān)的項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于three.js實(shí)現(xiàn)vr全景圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
在Store倉庫里，state就是用來存放數(shù)據(jù)。如果很多組件都使用這個(gè)過濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
Vue動(dòng)態(tài)修改網(wǎng)頁標(biāo)題的方法及遇到問題
Vue下有很多的方式去修改網(wǎng)頁標(biāo)題，這里總結(jié)下解決此問題的幾種方案:,需要的朋友可以參考下2019-06-06
vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決
這篇文章主要介紹了vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目使用axios封裝request請(qǐng)求的過程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue-cli2.x項(xiàng)目優(yōu)化之引入本地靜態(tài)庫文件的方法
這篇文章主要介紹了vue-cli2.x項(xiàng)目優(yōu)化之引入本地靜態(tài)庫文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06