這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
Webpacked 資源
我們首先需要理解webpack是怎樣處理靜態資源的。在*.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進行處理。 該模板已經配置好了這些loaders，所以你能夠使用相對/模塊路徑時不需要擔心部署的問題。
由於這些資源可能在構建的時候被內聯/複製/重命名， 所以它們從本質上來說是你源碼的一部分。這就是爲什麼我們建議將交由webpack處理的靜態資源和其它源文件一樣放在/src路徑下面。
實際上，你甚至不需要把它們全都放在/src/assets路徑下：你可以基於模塊/組件的使用來組織文件結構。例如，你可以把每個組件和屬於它的靜態資源放在它自己的目錄下。
資源處理規則
相對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.採用相對路徑，程序內部自己編寫的樣式和圖片，一般放在assets文件夾下。
top.vue中要引入圖片assets/images/home/photo.png，可以這樣寫img
<img src="../../assets/images/home/photo.png" />
本地dev渲染後，圖片路徑：（被打包放在靜態文件夾static的img下了）
build項目後，打開後圖片路徑：（靜態文件夾的相對路徑）
2.採用webpack中的alias設置路徑別名。
top.vue中可以這樣調用：（圖片放在static/images/home文件夾下）
<img src="~images/home/logo.png" />
項目dev後，也會被編譯成：
個人感覺第一種更直觀一些。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。