詳解vue2.0 資源文件assets和static的區(qū)別
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，當被看成一個模塊依賴的時候，我們需要使用url-loader 和 file-loader進行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對/模塊路徑時不需要擔心部署的問題。
由于這些資源可能在構建的時候被內(nèi)聯(lián)/復制/重命名， 所以它們從本質上來說是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。
實際上，你甚至不需要把它們?nèi)挤旁?code>/src/assets路徑下：你可以基于模塊/組件的使用來組織文件結構。例如，你可以把每個組件和屬于它的靜態(tài)資源放在它自己的目錄下。
資源處理規(guī)則
相對URL, ./assets/logo.png 將會被解釋成一個模塊依賴。它們會被一個基于你的Webpack輸出配置自動生成的URL替代。
沒有前綴的URL, assets/logo.png 將會被看成相對URL，并且轉換成./assets/logo.png
前綴帶~的URL 會被當成模塊請求, 類似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個前綴。例如，如果你有一個對于assets的路徑解析，你需要使用<img src="~assets/logo.png">來確保解析是對應上的。
相對根目錄的URL, /assets/logo.png 是不會被處理的.
測試總結：
1.采用相對路徑，程序內(nèi)部自己編寫的樣式和圖片，一般放在assets文件夾下。
top.vue中要引入圖片assets/images/home/photo.png，可以這樣寫img
<img src="../../assets/images/home/photo.png" />
本地dev渲染后，圖片路徑：（被打包放在靜態(tài)文件夾static的img下了）
build項目后，打開后圖片路徑：（靜態(tài)文件夾的相對路徑）
2.采用webpack中的alias設置路徑別名。
top.vue中可以這樣調(diào)用：（圖片放在static/images/home文件夾下）
<img src="~images/home/logo.png" />
項目dev后，也會被編譯成：
個人感覺第一種更直觀一些。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目在env文件中設置的變量無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量
Vue3項目使用vite作為打包工具時,環(huán)境變量可以保存在.env文件中,在build時進行解析,這篇文章主要給大家介紹了關于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的相關資料,需要的朋友可以參考下2024-03-03
Nvue是一個基于weex改進的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關于如何在vite里獲取env環(huán)境變量的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
Vue中一個組件調(diào)用其他組件的方法詳解(非父子組件)
vue中最常見子父組件產(chǎn)值,大家一定都很熟悉,最近項目中碰到非父組件中調(diào)用子組件方法的問題,這篇文章主要給大家介紹了關于Vue中一個組件調(diào)用其他組件的方法(非父子組件),需要的朋友可以參考下2022-10-10
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應式原理，vue則是采用發(fā)布者-訂閱者模式，通過Object.defineProperty()來劫持各個屬性的getter和setter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)2022-06-06
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
遍歷文本內(nèi)容,找到關鍵詞,并使用某種方法更改其字體樣式,經(jīng)過搜尋資料決定采用v-html實現(xiàn),但是v-html本身并不安全,有安全性風險且影響性能,所以謹慎使用,本文給大家介紹了Vue3使用v-html實現(xiàn)文本關鍵詞變色處理,需要的朋友可以參考下2024-06-06
vue-router 是一個插件，需要在 Vue 的全局引用中通過 Vue.use()將它引用到 Vue 實例當中。接下來通過本文給大家分享vue-router路由與頁面間導航，需要的朋友參考下吧2017-11-11