vue-router+nginx非根路徑的設定方法

這篇文章主要介紹了關於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框架二級選單改為三級選單的方法

設定|electron vue ts sqlite的設定方法

以上是vue-router+nginx非根路徑的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！