Vue項目添加前綴,ngnix發(fā)布相關修改問題
更新時間：2024年07月05日 10:55:53 作者：小魚愛曲奇
這篇文章主要介紹了Vue項目添加前綴,ngnix發(fā)布相關修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
項目場景
本人有個vue前端項目，要對接別人的平臺，需要加個前綴，但是這個項目本地也會使用，所以最后希望的效果是加了前綴和未加前綴都是可以使用的。
vue項目加前綴
項目使用的是vue 2.6
靜態(tài)文件的加前綴
加前綴的方式是使用vue.config.js配置文件，再這個配置文件中，加入publicPath:"/aaa" aaa是前綴。
publicPath是實現靜態(tài)文件加前綴：
module.exports = {
publicPath: "/aaa",
};
實現的效果：
dist下的index.html文件中的靜態(tài)文件的引入路徑會加上前綴：
<script src="/aaa/js/app.63e0b2dc.js"></script>
路徑加前綴
Vue的route中加入base
base:"/aaa" 實現路由加入前綴
路徑的跳轉會自動帶上前綴/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
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了VSCode搭建Vue項目的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
在Vue項目中實現首頁布局,包括可收放的左側菜單和主體內容區(qū),在store中管理菜單狀態(tài),通過修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側菜單欄的代碼和樣式,實現一個響應式的用戶界面2024-09-09
這篇文章主要介紹了Vue3中進行頁面局部刷新組件刷新的操作方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數據的過程，需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家整理了關于vue下canvas裁剪圖片實例講解內容，需要的朋友們可以參考下。2020-04-04
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個流行的前端框架，它提供了一種響應式的數據綁定機制，使得頁面的數據與頁面的 UI 組件之間能夠自動同步，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue之data定義的三種方式及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了一文學會什么是vue.nextTick()，下面文章圍繞主題的相關資料展開詳細內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了vue一步到位的實現動態(tài)路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06