當我們執行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
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。