你應(yīng)該注意到了，在項(xiàng)目結(jié)構(gòu)上我們有靜態(tài)資源兩個(gè)目錄：src/assets和static/。他們之間有什么區(qū)別？
通過webpack處理的資源
首先我們需要了解webpack如何處理靜態(tài)資源。在*.vue組件中，所有的html模板和css都會(huì)被vue-html-loader和css-loader壓縮并且查找資源路徑。例如，(../logo.png)和background:url(../logo.png)，'../logo.png'是一個(gè)相對路徑的資源文件，會(huì)被webpack處理成一個(gè)模塊依賴。
因?yàn)閘ogo.png不是javascript，當(dāng)要視為一個(gè)模塊依賴時(shí)，我們需要使用url-loader和file-loader來處理。這個(gè)模板已經(jīng)給你配置了這些loader，所以你可以輕易得到如指紋文件和Base64內(nèi)聯(lián)的功能，同時(shí)能夠使用相對路徑，從而不必?fù)?dān)心部署。
因?yàn)檫@些資源可能會(huì)在構(gòu)建過程中被內(nèi)聯(lián)/復(fù)制/重命名，它們本質(zhì)上還是你的一部分源代碼。這就是為什么建議要將通過webpack處理的靜態(tài)資源放置到/src目錄、與其余的代碼放在相同的地方。實(shí)際上，你甚至都不必將它們放置到/src/assets文件夾中：你可以把他們放到具體的模塊/組件 目錄中來使用。咧如，你可以將每一個(gè)組件放到它們自己的目錄中，靠著它們的靜態(tài)資源。
資源處理規(guī)則
<li>相對路徑url列如.lassets/logo.png會(huì)注入到一個(gè)模塊依賴中。他們會(huì)基于你的webpack輸出配置，自動(dòng)替換生成的url。</li>
<li>無前綴的url，列如assets/logo.png會(huì)被視為相同的相對路徑Url，被編譯進(jìn)./assets/logo.png。 </li>
<li>帶有前綴的額url，會(huì)作為一個(gè)模塊的請求，類似于require('some-module/image.png')。如果你希望當(dāng)做一個(gè)模塊來處理，你就需要使用這個(gè)前綴。例如你有一個(gè)assets的別名需要處理，你需要使用(~assets/logo.png)來確認(rèn)別名被注意到。 </li>
<li>根目錄相對路徑，例如/assets/logo.png直接不支持這種寫法</li>
獲得JS文件資源路徑
為了使webpack返回正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，這樣的話會(huì)通過file-loader處理并返回處理過的url路徑。例如：
computed:{
background(){
return require('./bgs/' + this.id + '.jpg')
}
}
注意上面的例子會(huì)將./bgs/目錄下的每個(gè)圖片最后生成。這是因?yàn)閣ebpack猜不到它們哪個(gè)會(huì)在運(yùn)行時(shí)會(huì)被使用，所以它會(huì)生成所有的文件。
“真的”靜態(tài)資源
相比之下，在static/并非由webpack來處理：他們是以相同的文件名，直接復(fù)制到他們的最終目標(biāo)目錄。你必須關(guān)注這些文件使用絕對路徑，這個(gè)通過config.js文件中的build.assetsPublicPath和build.assetsSubDirectory來控制。
如下面的例子，會(huì)有如下的默認(rèn)值
//config.js
module.exports = {
build:{
assetsPublicPath: '/',
assetsSubDirectory:'static'
}
}
<blockquote>
任何放在在static/的文件都使用絕對的URL /static/[filename]來引用。如果你修改assetsSubDirectory參數(shù)成assets，然后這些URL需要變成/assets/[filename]。
</blockquote>
