Vue中的靜態資源管理（src下的assets和static文件夾的區別）

你可能注意到了咱們的靜態資源共有兩個目錄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].