vue-router history模式在nginx二級目錄下的配置
當我們執行vue專案時,一切都很美好,但是打包釋出到線上時,那是真糟心。
之前有遇到過簡訊分享的連結包含#號不被識別的問題,所以使用過一段時間路由的history模式,但是必須放在域名根目錄下,而且我們的專案還不能使用二級路由,我一度認為確實就是這樣子的,大概就是當時懶癌發作了吧,路由的history模式就是去掉#號,使路徑變得美觀(我叫它玫瑰,漂亮但是帶著刺的危險)
history模式傳送門:https://router.vuejs.org/zh/guide/essentials/history-mode.html
1、assetsPublicPath
config/index.js檔案中的assetsPublicPath變數我們一向配置為./
這樣無論伺服器的nginx配置的是根目錄還是二級三級目錄,我們都是支援的
當使用history模式並且是根目錄的時候,必須使用/才能適配二級路由(如果沒有二級路由./依然可以)
nginx配置如下:(關鍵的一句話是try_files,不管怎麼輸入地址都指向index.html)
2、二級目錄
先配置nginx:
再配置config/index.js檔案中的assetsPublicPath
assetsPublicPath:'/testweb/',
最後設定路由:
大功告成了,三級選單如法炮製即可
總結,雖然成功了,除非不得已,我還是不建議使用history,二級或者三級目錄在history模式下必須前後端同時配置,這就是個潛在風險
參考博文:https://segmentfault.com/a/1190000015753352?utm_source=tag-newest
https://www.jianshu.com/p/6653e350121d
作者:kelezxw
連結:https://www.jianshu.com/p/79f14f91f9db
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。