vue中如何給靜態(tài)資源增加路由前綴
更新時間：2022年12月09日 09:36:17 作者：對這是我的昵稱
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue給靜態(tài)資源增加路由前綴
在vue.config.js中找到這段代碼：
找到publicPath，這個就是靜態(tài)資源的默認(rèn)路徑，默認(rèn)值是/，也就是靜態(tài)資源默認(rèn)路徑是你的域名+路徑，所以我們只需修改publicPath的值，就可以達(dá)到加前綴的效果，修改后效果如下：
現(xiàn)在你頁面上的所有靜態(tài)資源路徑都會加上web前綴了
說說vue中的~（靜態(tài)資源處理）
Webpacked 資源
首先要理解webpack是怎樣處理靜態(tài)資源的。
在*.vue組件中，所有的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。
舉個例子，在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中，都是相對資源路徑，都會被Webpack解析成模塊依賴，由于logo.png不是JavaScript，當(dāng)被看成一個模塊依賴的時候，我們需要使用url-loader 和 file-loader進(jìn)行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對/模塊路徑時不需要擔(dān)心部署的問題。
資源處理規(guī)則
- 相對URL, e.g. ./assets/logo.png 將會被解釋成一個模塊依賴。它們會被一個基于你的Webpack輸出配置自動生成的URL替代。
- 沒有前綴的URL, e.g. assets/logo.png 將會被看成相對URL，并且轉(zhuǎn)換成./assets/logo.png
- 前綴帶~的URL 會被當(dāng)成模塊請求, 類似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個前綴。例如，如果你有一個對于assets的路徑解析，你需要使用<img src="~assets/logo.png">來確保解析是對應(yīng)上的。
- 相對根目錄的URL, e.g. /assets/logo.png 是不會被處理的。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗證功能，本文通過一個小例子給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue虛擬dom是如何被創(chuàng)建的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
使用vue-cli導(dǎo)入Element UI組件的方法
這篇文章給大家介紹了使用vue-cli導(dǎo)入Element UI組件的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友一起看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue組件生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了深入理解Vue nextTick 機(jī)制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?select組件綁定的值為數(shù)字類型遇到的問題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在部署 Vue.js 項目時,有時會遇到首頁加載后出現(xiàn)白屏的情況,這可能是由于多種原因造成的,本文將介紹一些常見的排查方法和解決方案,幫助開發(fā)者快速定位問題并解決,感興趣的小伙伴跟著小編一起來看看吧2024-08-08