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)文章
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應(yīng)式的變量,通過將ref函數(shù)應(yīng)用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實例的詳細(xì)圖文教程,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue CLI 2.x搭建vue(目錄最全分析),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解Vue 2中的? initState 狀態(tài)初始化
這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果
這篇文章主要介紹了基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果,需要的朋友可以參考下2018-01-01
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06