你可能注意到了我們的靜態資源共有兩個目錄src/assets和static/，你們它們之間有怎樣的區別呢？
資源打包
為了回答這個問題，我們需要了解webpack是如何處理靜態資源的。
在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查詢資源的URLs解析. 比如說, 在
img src=”./logo.png”
和
background: url(./logo.png)
中./logo.png是一個相對資源路徑，並且會被Webpack視為一個模塊依賴來解析。
因為./logo.png並非一個Javascript，當將它作為模塊依賴對待時，我們需要用url-loader和file-loader去處理它。這種公式化處理早已經為你配置了loader，所以你基本上可以獲得諸如文件名指紋和有條件的內嵌base64，因此你能夠使用相對/模塊路徑而不必擔心部署問題。
自從這些資源可以在build期間被內聯/復制/重命名，它們本質上來講是你資源代碼的一部分。這就是為什么它們被推薦用於延源資源替換Webpack-processed的內部/src資源。事實上，你甚至不必將它們放進/src/assets：你可以基於模塊/組件去組織它們並使用，你可以將每一個組件放進他們自己的文件夾，隨着它的靜態文件正確的緊挨着它。
資源決定規則
● 相對URLs,
例如 ./assets/logo.png 將會被解釋為一個模塊依賴.
它們將會被替換為基於你Webpack輸出配置自動生成的 URL
● 無前綴URLs,
例如. assets/logo.png 將會被像相對URLs一樣處理並將被轉化為 ./assets/logo.png.
● 帶~前綴的URLs 將會被看做模塊請求， 類似於請求(‘some-module/image.png’).
如果你想改變Webpack的模塊解決配置你需要使用這個前綴 。例如,你需要處理資源的別名，你需要使用 ~assets/logo.png去確保這個別名時受到重視的.
● 特權相對URLs,
例如 /assets/logo.png 是完全不作處理的.
在Javascript中獲取資源路徑
為了使Webpack可以正確返回資源路徑, 你需要使用
require(‘./relative/path/to/file.jpg’)
, 它將會被file-loader處理 and returns並返回處理過的URL. 例如:
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
注意上例將會包含每個在最后一次build中的./bgs/ 下的圖片。 這是由於 Webpack 無法推測它們哪個會在運行時被使用, 因此會包含所有圖片.
“真正”的靜態資源
對比而言, static/ 中的文件是完全不被Webpack處理的，
它們被以相同的文件名直接被復制進最終目標as-is.你務必要使用絕對路徑去引用它們.這是由config.js加入build.assetspublicpath和build.assetssubdirectory確定。
如下是一個含默認值得例子：
// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
任何在 static/ 中的文件都需要被使用絕對路徑 /static/[filename]來引用. 如果你改變assetSubDirectory 為assets, 那么這些 URLs將需要被替換為 /assets/[filename].