vue-router+nginx 非根路徑配置方法
更新時間：2018年06月30日 08:35:56 作者：xieyanmei
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue-router 的默認(rèn)數(shù)據(jù)hash模式-使用url的hash來模擬一個完整的URL，于是當(dāng)URL改變時，頁面不會重新加載。
一般情況下，我們不喜歡丑丑的hash，類似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API來實現(xiàn)頁面跳轉(zhuǎn)。
但是有個問題，在使用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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn)功能
- Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
- Vue3實戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
- vue-router如何實現(xiàn)history模式配置
- Vue-Router的routes配置詳解
- Vue Router history模式的配置方法及其原理
- vue-router的使用方法及含參數(shù)的配置方法
- 使用vue-router為每個路由配置各自的title
- vue router 配置路由的方法
- vue中的Router基本配置命令實例詳解
相關(guān)文章
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
在本篇文章里小編給大家整理的是一篇關(guān)于Vue+ElementUI怎么處理超大表單實例講解內(nèi)容，以后需要的朋友可以跟著學(xué)習(xí)參考下。2021-11-11
這篇文章主要介紹了vue項目打包部署后默認(rèn)路由不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Ant Design Vue 添加區(qū)分中英文的長度校驗功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下功能，2020-01-01
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識，本文通過實例代碼給大家介紹了vue router的使用，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關(guān)資料內(nèi)容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了Vuex之module使用方法及場景說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10