vue hash模式轉爲history模式（二級路由）

1.

2.

 3.後臺修改

vue的路由在默認的hash模式下,默認打包通常不會有什麼問題,不過hash模式因爲url會帶有一個#,不美觀,並且在微信分享,受權登陸等都會有一些坑.因此history模式也會有一些應用場景.新手每每會碰到history模式打包後頁面一片空白的狀況,並且沒有資源加載錯誤的報錯信息.

這個其實仔細研究下會發現,若是項目直接放的跟目錄, 那麼是沒有問題的,若是是子目錄,那麼就會一片空白了.這個vue官方有解釋,須要加一個base

?

1 2	// base: '/history', // mode: 'history',

這個base即爲項目路徑.

以上兩個都解決了,仍是會發現,此時只有首頁能訪問,經過首頁點進去其餘路由也是能夠的,可是若是在其餘路由刷新就有錯誤了,這個懂history模式的也應該知道,history模式是h5 api的 history.pushState,相對因而瀏覽器模擬了一條歷史,而真正服務器上沒有這個路徑資源,爲何hash模式不存在這個問題呢?hash模式是帶#,這個服務器不會解析,相對於仍是返回html而已,index.html會根據vue路由去解析,而history模式則會請求服務器上的此地址,服務器上沒有相關路徑就會報錯了,vue-router的官方文檔有介紹各類配置,好比ngnix的配置

?

1 2 3

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

上面這個對於直接項目的根目錄是能夠的,可是若是項目不是根目錄仍是會有問題,

?

1 2 3 4 5 6 7 8 9

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