關於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專案的構建，打包和發布過程的介紹

##關於vue v-model動態產生的介紹

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