nginx服務器配置vue-router history模式（去除url中的#號）

前言：關於單頁原理 hash模式和history模式 請自行查閱資料

-------
複製代碼

按照vue-router官網的辦法

https://router.vuejs.org/zh/guide/essentials/history-mode.html#後端配置例子

問題的原由是配置nginx後，發現頁面刷新失敗，報錯：Uncaught SyntaxError: Unexpected token <

這裏插一個坑：

try_files $uri $uri/ /index.html;
複製代碼

不要加在跨域location中 會產生一些接口405或者沒有數據的問題，至於緣由。。。我也不懂鴨

好吧迴歸征途

按照第一步，在路由啓用history模式而且從新打包之後，打開瀏覽器發現頁面url中的#號已經沒有了，這時咱們隨便進一個子路由刷新一下頁面

意料之中出現了404

很好，按照文檔在nginx配置項中 添加

try_files $uri $uri/ /index.html;
複製代碼

而後重啓，試試看。

如圖，emmm。。 平常不按教程出結果，此次頁面一片空白，右邊控制檯報錯未知符號，像這種時候 咱們應該知道 這是文件類型不對 看看內容

爲何會是html文件呢，加載的明明是js文件啊，因而在查閱了一些資料之後，能夠產生這麼一個猜測： js的路徑出了問題，而後 try_files uri/ /index.html; 將路徑重指向index.html，因而就變成了咱們看到的請求js文件 卻返回了html的內容。看一下Network的請求路徑：

很好 路徑是錯的，猜測初步正確，緣由嘛竟然是路徑中參雜了子路由（insService）的路徑，爲何會這樣呢 咱們打開index.html 看到了js的路徑：

偶吼，竟然是個相對路徑。那麼很明顯：問題是在子路由下按照相對路徑請求js文件，因爲子路由的路徑在電腦的物理路徑中是不存在的，因此產生加載404，而後nginx將這個js的404從新指向index 最後瀏覽器的解析js文件時卻讀到了html文件 因而就出現了前面的控制檯報錯 Unexpected token <，

固然這只是猜測，那咱們如今就嘗試解決看看 辦法就是把打包完的js路徑改成絕對路徑。

而後打包

如今已是絕對路徑了，咱們再試試刷新。

很好 ， 頁面已經成功刷新出來 問題解決