你可能注意到了我們的靜態資源共有兩個目錄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.jsmodule.exports = {
// ... build: {
assetsPublicPath: '/', assetsSubDirectory: 'static'
}
}複製程式碼任何在 static/ 中的檔案都需要被使用絕對路徑 /static/[filename]來引用. 如果你改變assetSubDirectory 為assets, 那麼這些 URLs將需要被替換為 /assets/[filename].