Vue-cli中的靜態資源管理（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].

  參考原文：https://blog.csdn.net/riddle1981/article/details/78469032

 譯自：http://vuejs-templates.github.io/webpack/static.html