你可能注意到了我們的靜態(tài)資源共有兩個目錄src/assets和static/，你們它們之間有怎樣的區(qū)別呢？

資源打包

為了回答這個問題，我們需要了解webpack是如何處理靜態(tài)資源的。在所有的*.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：你可以基于模塊/組件去組織它們并使用，你可以將每一個組件放進他們自己的文件夾，隨著它的靜態(tài)文件正確的緊挨著它。

資源決定規(guī)則

1. 相對URLs, 例如 ./assets/logo.png 將會被解釋為一個模塊依賴. 它們將會被替換為基于你Webpack輸出配置自動生成的 URL
2. 無前綴URLs, 例如. assets/logo.png 將會被像相對URLs一樣處理并將被轉化為 ./assets/logo.png.
3. 帶~前綴的URLs 將會被看做模塊請求， 類似于請求(‘some-module/image.png'). 如果你想改變Webpack的模塊解決配置你需要使用這個前綴 。例如,你需要處理資源的別名，你需要使用 ~assets/logo.png去確保這個別名時受到重視的.
4. 特權相對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 無法推測它們哪個會在運行時被使用, 因此會包含所有圖片.

“真正”的靜態(tài)資源

對比而言, 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].

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論