Vue項目添加前綴,ngnix發(fā)布相關(guān)修改問題
更新時間：2024年07月05日 10:55:53 作者：小魚愛曲奇
這篇文章主要介紹了Vue項目添加前綴,ngnix發(fā)布相關(guān)修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
項目場景
本人有個vue前端項目，要對接別人的平臺，需要加個前綴，但是這個項目本地也會使用，所以最后希望的效果是加了前綴和未加前綴都是可以使用的。
vue項目加前綴
項目使用的是vue 2.6
靜態(tài)文件的加前綴
加前綴的方式是使用vue.config.js配置文件，再這個配置文件中，加入publicPath:"/aaa" aaa是前綴。
publicPath是實現(xiàn)靜態(tài)文件加前綴：
module.exports = {
publicPath: "/aaa",
};
實現(xiàn)的效果：
dist下的index.html文件中的靜態(tài)文件的引入路徑會加上前綴：
<script src="/aaa/js/app.63e0b2dc.js"></script>
路徑加前綴
Vue的route中加入base
base:"/aaa" 實現(xiàn)路由加入前綴
路徑的跳轉(zhuǎn)會自動帶上前綴/aaa
ngnix配置的更改
首先必須清楚ngnix中的alias和root的區(qū)別
- root讀取的時根目錄。可以在server或location指令中使用。
- alias只能在location指令中使用。
location命中后
- 如果是root，會把請求url的
ip/域名+port替換為root指定的目錄，訪問資源 - 如果是alias，會把請求url的
ip/域名+port+匹配到的路徑替換為alias指定的目錄，訪問資源
舉個栗子
若請求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
root /home/abc/;
}則實際的http://example.com/替換為/home/abc訪問路徑：/home/abc/ftt//baa/hello.html
若請求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
alias /home/abc/;
}則實際的http://example.com/ftt替換為/home/abc訪問路徑：/home/abc/baa/hello.html
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目頁面滾動時數(shù)據(jù)欄位光標(biāo)跳動問題的解決方案
在 Vue 項目中遇到頁面滾動時數(shù)據(jù)欄位光標(biāo)跳動的問題,通常是因為滾動事件觸發(fā)了不必要的組件重繪,導(dǎo)致輸入框或可聚焦元素被重新渲染,從而丟失焦點、光標(biāo)重置,以下是幾個常見原因及對應(yīng)的解決方案,需要的朋友可以參考下2026-03-03
本文介紹了如何在Vue3項目中使用OpenLayers實現(xiàn)地圖展示功能,包括安裝OpenLayers、創(chuàng)建地圖組件、添加圖層、修改地圖樣式以及實現(xiàn)地圖點擊等功能,通過完整的代碼示例,展示了如何在地圖上添加標(biāo)注和連線,OpenLayers提供了豐富的API和組件,可以滿足各種地圖展示需求2025-12-12
Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式
今天小編就為大家分享一篇Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue 項目全屏插件screenfull使用案例,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
SCSS是一種CSS預(yù)處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue3使用echarts tree高度自適應(yīng)支持滾動查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應(yīng)支持滾動查看功能,文章同通過代碼示例介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-06-06
vite+vue3項目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項目中svg圖標(biāo)組件封裝的過程,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue中SPA單頁面應(yīng)用程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
可以把數(shù)據(jù)變成響應(yīng)式api的方法叫做響應(yīng)式api,下面這篇文章主要給大家介紹了關(guān)于vue3響應(yīng)式對象api的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05