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 的路徑

查看原文 blog.noob6.com/2018/06/05/…