這篇文章主要介紹了關於vue-router nginx非根路徑的配置方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
vue-router 的默認資料hash模式-使用url的hash來模擬一個完整的URL，於是當URL改變時，頁面不會重新載入。
一般情況下，我們不喜歡醜醜的hash，類似index.html#/matchResult，可以使用路由的history模式。 history模式是利用history.pushState API來實現頁面跳躍。
但有個問題，在使用nginx的時候，我們需要加入一些設定。
直接配置在根路徑下，訪問的時候只用輸入http://yoursite.com，在nginx的配置如下
location / {
try_files $uri $uri/ /index.html;
}如果一個網域下有多個項目，那麼使用根路徑配置就不合適了，我們需要在根路徑下指定一層路徑，比如說
A項目
http://yoursite.com/A
B項目
http://yoursite.com/B
nginx的設定
location ^~/A {
alias /XX/A;//此处为A的路径
index index.html;
try_files $uri $uri/ /A/index.html;
}
location ^~/B {
alias /XX/B;//此处为B的路径
index index.html;
try_files $uri $uri/ /B/index.html;
}tip: 注意要用alias不能用root
#以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
vue如何解決addRoutes動態新增路由後刷新失效的問題
Vue iview-admin框架二級選單改為三級選單的方法
以上是vue-router+nginx非根路徑的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
