vue中如何給靜態(tài)資源增加路由前綴
vue給靜態(tài)資源增加路由前綴
在vue.config.js中找到這段代碼：
找到publicPath，這個(gè)就是靜態(tài)資源的默認(rèn)路徑，默認(rèn)值是/，也就是靜態(tài)資源默認(rèn)路徑是你的域名+路徑，所以我們只需修改publicPath的值，就可以達(dá)到加前綴的效果，修改后效果如下：
現(xiàn)在你頁面上的所有靜態(tài)資源路徑都會(huì)加上web前綴了
說說vue中的~（靜態(tài)資源處理）
Webpacked 資源
首先要理解webpack是怎樣處理靜態(tài)資源的。
在*.vue組件中，所有的templates和css都會(huì)被vue-html-loader 和 css-loader解析，尋找資源的URL。
舉個(gè)例子，在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中，都是相對(duì)資源路徑，都會(huì)被Webpack解析成模塊依賴，由于logo.png不是JavaScript，當(dāng)被看成一個(gè)模塊依賴的時(shí)候，我們需要使用url-loader 和 file-loader進(jìn)行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對(duì)/模塊路徑時(shí)不需要擔(dān)心部署的問題。
資源處理規(guī)則
- 相對(duì)URL, e.g. ./assets/logo.png 將會(huì)被解釋成一個(gè)模塊依賴。它們會(huì)被一個(gè)基于你的Webpack輸出配置自動(dòng)生成的URL替代。
- 沒有前綴的URL, e.g. assets/logo.png 將會(huì)被看成相對(duì)URL，并且轉(zhuǎn)換成./assets/logo.png
- 前綴帶~的URL 會(huì)被當(dāng)成模塊請(qǐng)求, 類似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個(gè)前綴。例如，如果你有一個(gè)對(duì)于assets的路徑解析，你需要使用<img src="~assets/logo.png">來確保解析是對(duì)應(yīng)上的。
- 相對(duì)根目錄的URL, e.g. /assets/logo.png 是不會(huì)被處理的。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.0設(shè)置全局樣式(less/sass和css)
這篇文章主要為大家詳細(xì)介紹了Vue2.0設(shè)置全局樣式(less/sass和css)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳解vue3+element-plus實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由動(dòng)態(tài)按鈕(前后端分離)
本文需要使用axios,路由,pinia,安裝element-plus,并且本文vue3是基于js而非ts的,這些環(huán)境如何搭建不做描述,需要讀者自己完成,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了Vue自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的方法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
淺談vue-cli加載不到dev-server.js的解決辦法
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在vue2中v-model使用的還是挺多的,不過這個(gè)指令一般是用在了輸入框中,并且這個(gè)指令其實(shí)就是個(gè)語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下2021-09-09
axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法
今天小編就為大家分享一篇axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08