詳解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)心部署的問(wèn)題。

由于這些資源可能在構(gòu)建的時(shí)候被內(nèi)聯(lián)/復(fù)制/重命名， 所以它們從本質(zhì)上來(lái)說(shuō)是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。

實(shí)際上，你甚至不需要把它們?nèi)挤旁?code>/src/assets路徑下：你可以基于模塊/組件的使用來(lái)組織文件結(jié)構(gòu)。例如，你可以把每個(gè)組件和屬于它的靜態(tài)資源放在它自己的目錄下。

資源處理規(guī)則

相對(duì)URL, ./assets/logo.png 將會(huì)被解釋成一個(gè)模塊依賴。它們會(huì)被一個(gè)基于你的Webpack輸出配置自動(dòng)生成的URL替代。

沒(méi)有前綴的URL, assets/logo.png 將會(huì)被看成相對(duì)URL，并且轉(zhuǎn)換成./assets/logo.png

前綴帶~的URL 會(huì)被當(dāng)成模塊請(qǐng)求, 類(lèi)似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個(gè)前綴。例如，如果你有一個(gè)對(duì)于assets的路徑解析，你需要使用<img src="~assets/logo.png">來(lái)確保解析是對(duì)應(yīng)上的。

相對(duì)根目錄的URL, /assets/logo.png 是不會(huì)被處理的.

測(cè)試總結(jié)：

1.采用相對(duì)路徑，程序內(nèi)部自己編寫(xiě)的樣式和圖片，一般放在assets文件夾下。

top.vue中要引入圖片assets/images/home/photo.png，可以這樣寫(xiě)img

<img src="../../assets/images/home/photo.png" />

本地dev渲染后，圖片路徑：（被打包放在靜態(tài)文件夾static的img下了）

build項(xiàng)目后，打開(kāi)后圖片路徑：（靜態(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è)人感覺(jué)第一種更直觀一些。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。