vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法
具體步驟
Vue 中配置
(1)更改router模式,添加前綴
位置:router文件夾下面的index.js
const router = new Router({
base: '/nhtjfx/', // 路由前綴(該地方配置后,會(huì)發(fā)現(xiàn)你的啟動(dòng)地址也會(huì)加上這個(gè)前綴)
mode: 'history', // 采用history模式URL的路徑才跟配置的對(duì)應(yīng)上,不然URL是先加/#再追加配置的地
routes:[...]
});(2)實(shí)現(xiàn)靜態(tài)文件加前綴
位置:vue.config.js
靜態(tài)資源css,js之類的的src或href引用位置會(huì)加上這個(gè)前綴,會(huì)體現(xiàn)在打包后的index.html文件內(nèi)容
例如
未加之前:<link href="./static/js/chunk-c8ec8b4a.e230ecc5.js" rel="external nofollow" rel="prefetch"> 加之后:<link href="/nhtjfx/static/js/chunk-c8ec8b4a.e230ecc5.js" rel="external nofollow" rel="prefetch">
module.exports = {
publicPath: '/nhtjfx/',
}(3)nignx配置
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /nhtjfx/ {
alias /usr/local/linewell/web/nhjcfx/front/nhtjfx/;
index index.html;
try_files $uri $uri/ /nhtjfx/index.html;
}
#location / {
# root /usr/local/linewell/web/nhjcfx/front/nhtjfx;#vue前端項(xiàng)目打包后放在這里
# root /usr/local/linewell/web/nhjcfx/front/build;
# index index.html index.htm;#這個(gè)index.html 是上面dist目錄下的index.html
# try_files $uri $uri/ /index.html; # 解決刷新出現(xiàn)404
# }
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}補(bǔ)充:
Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guā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
到此這篇關(guān)于vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法的文章就介紹到這了,更多相關(guān)vue 前端加前綴內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式
這篇文章主要介紹了使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能實(shí)例代碼
vuedraggable是一個(gè)基于Sortable.js的Vue.js拖拽排序插件,提供簡(jiǎn)單、靈活且強(qiáng)大的拖拽功能,支持Vue2和Vue3,這篇文章主要介紹了Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下2026-02-02
Vue Official 手動(dòng)更改插件顯示語(yǔ)言的解決方案
文章介紹如何通過(guò)修改Volar插件內(nèi)部文件,使英文版VS Code顯示中文代碼提示,需手動(dòng)調(diào)整language-server.js中的語(yǔ)言設(shè)置,但因文件經(jīng)壓縮混淆,操作復(fù)雜且無(wú)官方支持,存在兼容性風(fēng)險(xiǎn)2025-07-07
解讀vue項(xiàng)目中遇到的深拷貝淺拷貝問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中遇到的深拷貝淺拷貝問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09

