vue-router+nginx 非根路徑配置方法
更新時間：2018年06月30日 08:35:56 作者：xieyanmei
這篇文章主要介紹了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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07
在本篇文章里小編給大家整理的是一篇關于Vue+ElementUI怎么處理超大表單實例講解內容，以后需要的朋友可以跟著學習參考下。2021-11-11
這篇文章主要介紹了vue項目打包部署后默認路由不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了用vue2.0實現點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Ant Design Vue 添加區(qū)分中英文的長度校驗功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下功能，2020-01-01
這篇文章主要介紹了vue路由插件之vue-route的相關知識，本文通過實例代碼給大家介紹了vue router的使用，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數實現加密過程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關資料內容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了Vuex之module使用方法及場景說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10