vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法
具體步驟
Vue 中配置
(1)更改router模式,添加前綴
位置:router文件夾下面的index.js
const router = new Router({ base: '/nhtjfx/', // 路由前綴(該地方配置后,會發(fā)現(xiàn)你的啟動地址也會加上這個前綴) mode: 'history', // 采用history模式URL的路徑才跟配置的對應(yīng)上,不然URL是先加/#再追加配置的地 routes:[...] });
(2)實現(xiàn)靜態(tài)文件加前綴
位置:vue.config.js
靜態(tài)資源css,js之類的的src或href引用位置會加上這個前綴,會體現(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前端項目打包后放在這里 # root /usr/local/linewell/web/nhjcfx/front/build; # index index.html index.htm;#這個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; } }
補充:
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
到此這篇關(guān)于vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法的文章就介紹到這了,更多相關(guān)vue 前端加前綴內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
今天小編就為大家分享一篇vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11VUE解決微信簽名及SPA微信invalid signature問題(完美處理)
這篇文章主要介紹了VUE解決微信簽名及SPA微信invalid signature問題(完美處理),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-03-03vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01