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 的路徑
查看原文:http://blog.noob6.com/2018/06/05/vue-history-page-white/