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

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

目前創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、建湖網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

這個(gè)base即為項(xiàng)目路徑.

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

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

上面這個(gè)對于直接項(xiàng)目的根目錄是可以的,但是如果項(xiàng)目不是根目錄還是會有問題,

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,這樣配置后就不會有vue打包后頁面空白問題了,history路由也可以自由訪問了,不過要記得上面說的,非根目錄的項(xiàng)目需要加上base 的路徑

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：Vue下路由History模式打包后頁面空白的解決方法
網(wǎng)頁路徑：http://muchs.cn/article4/jpiioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、微信小程序、網(wǎng)站策劃、小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

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

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