Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問(wèn)題
項(xiàng)目場(chǎng)景
本人有個(gè)vue前端項(xiàng)目，要對(duì)接別人的平臺(tái)，需要加個(gè)前綴，但是這個(gè)項(xiàng)目本地也會(huì)使用，所以最后希望的效果是加了前綴和未加前綴都是可以使用的。
vue項(xiàng)目加前綴
項(xiàng)目使用的是vue 2.6
靜態(tài)文件的加前綴
加前綴的方式是使用vue.config.js配置文件，再這個(gè)配置文件中，加入publicPath:"/aaa" aaa是前綴。
publicPath是實(shí)現(xiàn)靜態(tài)文件加前綴：
module.exports = {
publicPath: "/aaa",
};
實(shí)現(xiàn)的效果：
dist下的index.html文件中的靜態(tài)文件的引入路徑會(huì)加上前綴：
<script src="/aaa/js/app.63e0b2dc.js"></script>
路徑加前綴
Vue的route中加入base
base:"/aaa" 實(shí)現(xiàn)路由加入前綴
路徑的跳轉(zhuǎn)會(huì)自動(dòng)帶上前綴/aaa
ngnix配置的更改
首先必須清楚ngnix中的alias和root的區(qū)別
- root讀取的時(shí)根目錄?？梢栽趕erver或location指令中使用。
- alias只能在location指令中使用。
location命中后
- 如果是root，會(huì)把請(qǐng)求url的
ip/域名+port替換為root指定的目錄，訪問(wèn)資源 - 如果是alias，會(huì)把請(qǐng)求url的
ip/域名+port+匹配到的路徑替換為alias指定的目錄，訪問(wèn)資源
舉個(gè)栗子
若請(qǐng)求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
root /home/abc/;
}則實(shí)際的http://example.com/替換為/home/abc訪問(wèn)路徑：/home/abc/ftt//baa/hello.html
若請(qǐng)求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
alias /home/abc/;
}則實(shí)際的http://example.com/ftt替換為/home/abc訪問(wèn)路徑：/home/abc/baa/hello.html
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VSCode搭建Vue項(xiàng)目的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
在Vue項(xiàng)目中實(shí)現(xiàn)首頁(yè)布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過(guò)修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側(cè)菜單欄的代碼和樣式,實(shí)現(xiàn)一個(gè)響應(yīng)式的用戶界面2024-09-09
Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法
這篇文章主要介紹了Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue3+vite+移動(dòng)端webview打包后頁(yè)面加載空白問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+vite+移動(dòng)端webview打包后頁(yè)面加載空白問(wèn)題的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue3.x中apollo的使用,通過(guò)前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒(méi)有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過(guò)程，需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家整理了關(guān)于vue下canvas裁剪圖片實(shí)例講解內(nèi)容，需要的朋友們可以參考下。2020-04-04
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個(gè)流行的前端框架，它提供了一種響應(yīng)式的數(shù)據(jù)綁定機(jī)制，使得頁(yè)面的數(shù)據(jù)與頁(yè)面的 UI 組件之間能夠自動(dòng)同步，需要的朋友可以參考下2023-04-04
Vue之data定義的三種方式及區(qū)別說(shuō)明
這篇文章主要介紹了Vue之data定義的三種方式及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
一文學(xué)會(huì)什么是vue.nextTick()
這篇文章主要介紹了一文學(xué)會(huì)什么是vue.nextTick()，下面文章圍繞主題的相關(guān)資料展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
vue一步到位的實(shí)現(xiàn)動(dòng)態(tài)路由
這篇文章主要介紹了vue一步到位的實(shí)現(xiàn)動(dòng)態(tài)路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06