詳解vue2.0 資源文件assets和static的區(qū)別
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)心部署的問題。
由于這些資源可能在構(gòu)建的時(shí)候被內(nèi)聯(lián)/復(fù)制/重命名， 所以它們從本質(zhì)上來說是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。
實(shí)際上，你甚至不需要把它們?nèi)挤旁?code>/src/assets路徑下：你可以基于模塊/組件的使用來組織文件結(jié)構(gòu)。例如，你可以把每個(gè)組件和屬于它的靜態(tài)資源放在它自己的目錄下。
資源處理規(guī)則
相對(duì)URL, ./assets/logo.png 將會(huì)被解釋成一個(gè)模塊依賴。它們會(huì)被一個(gè)基于你的Webpack輸出配置自動(dòng)生成的URL替代。
沒有前綴的URL, 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, /assets/logo.png 是不會(huì)被處理的.
測(cè)試總結(jié)：
1.采用相對(duì)路徑，程序內(nèi)部自己編寫的樣式和圖片，一般放在assets文件夾下。
top.vue中要引入圖片assets/images/home/photo.png，可以這樣寫img
<img src="../../assets/images/home/photo.png" />
本地dev渲染后，圖片路徑：（被打包放在靜態(tài)文件夾static的img下了）
build項(xiàng)目后，打開后圖片路徑：（靜態(tài)文件夾的相對(duì)路徑）
2.采用webpack中的alias設(shè)置路徑別名。
top.vue中可以這樣調(diào)用：（圖片放在static/images/home文件夾下）
<img src="~images/home/logo.png" />
項(xiàng)目dev后，也會(huì)被編譯成：
個(gè)人感覺第一種更直觀一些。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-socket.io接收不到數(shù)據(jù)問題的解決方法
這篇文章主要介紹了解決vue-socket.io接收不到數(shù)據(jù)問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
VUE2.0+Element-UI+Echarts封裝的組件實(shí)例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識(shí),插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie的問題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
Vue實(shí)戰(zhàn)記錄之登陸頁面的實(shí)現(xiàn)
最近學(xué)習(xí)過程中常碰到讓用戶登錄注冊(cè)這種,這篇文章主要給大家介紹了關(guān)于Vue實(shí)戰(zhàn)記錄之登陸頁面實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue+element?upload上傳帶參數(shù)的實(shí)例
這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實(shí)例的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vscode使用Eslint+Prettier格式化代碼的詳細(xì)操作
這篇文章主要介紹了vscode使用Eslint+Prettier格式化代碼，本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08