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

資源打包

為了回答這個(gè)問(wèn)題，我們需要了解webpack是如何處理靜態(tài)資源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查詢資源的URLs解析. 比如說(shuō), 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一個(gè)相對(duì)資源路徑，并且會(huì)被Webpack視為一個(gè)模塊依賴來(lái)解析。

因?yàn)?/logo.png并非一個(gè)Javascript，當(dāng)將它作為模塊依賴對(duì)待時(shí)，我們需要用url-loader和file-loader去處理它。這種公式化處理早已經(jīng)為你配置了loader，所以你基本上可以獲得諸如文件名指紋和有條件的內(nèi)嵌base64，因此你能夠使用相對(duì)/模塊路徑而不必?fù)?dān)心部署問(wèn)題。

自從這些資源可以在build期間被內(nèi)聯(lián)/復(fù)制/重命名，它們本質(zhì)上來(lái)講是你資源代碼的一部分。這就是為什么它們被推薦用于延源資源替換Webpack-processed的內(nèi)部/src資源。事實(shí)上，你甚至不必將它們放進(jìn)/src/assets：你可以基于模塊/組件去組織它們并使用，你可以將每一個(gè)組件放進(jìn)他們自己的文件夾，隨著它的靜態(tài)文件正確的緊挨著它。

資源決定規(guī)則

1. 相對(duì)URLs, 例如 ./assets/logo.png 將會(huì)被解釋為一個(gè)模塊依賴. 它們將會(huì)被替換為基于你Webpack輸出配置自動(dòng)生成的 URL
2. 無(wú)前綴URLs, 例如. assets/logo.png 將會(huì)被像相對(duì)URLs一樣處理并將被轉(zhuǎn)化為 ./assets/logo.png.
3. 帶~前綴的URLs 將會(huì)被看做模塊請(qǐng)求， 類(lèi)似于請(qǐng)求(‘some-module/image.png'). 如果你想改變Webpack的模塊解決配置你需要使用這個(gè)前綴 。例如,你需要處理資源的別名，你需要使用 ~assets/logo.png去確保這個(gè)別名時(shí)受到重視的.
4. 特權(quán)相對(duì)URLs, 例如 /assets/logo.png 是完全不作處理的.
   

在Javascript中獲取資源路徑

為了使Webpack可以正確返回資源路徑, 你需要使用 require(‘./relative/path/to/file.jpg'), 它將會(huì)被file-loader處理 and returns并返回處理過(guò)的URL. 例如:

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}

注意上例將會(huì)包含每個(gè)在最后一次build中的./bgs/ 下的圖片。 這是由于 Webpack 無(wú)法推測(cè)它們哪個(gè)會(huì)在運(yùn)行時(shí)被使用, 因此會(huì)包含所有圖片.

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

對(duì)比而言, static/ 中的文件是完全不被Webpack處理的，它們被以相同的文件名直接被復(fù)制進(jìn)最終目標(biāo)as-is.你務(wù)必要使用絕對(duì)路徑去引用它們.這是由config.js加入build.assetspublicpath和build.assetssubdirectory確定。

如下是一個(gè)含默認(rèn)值得例子：

// config/index.js
module.exports = {
 // ...
 build: {
 assetsPublicPath: '/',
 assetsSubDirectory: 'static'
 }
}

任何在 static/ 中的文件都需要被使用絕對(duì)路徑 /static/[filename]來(lái)引用. 如果你改變assetSubDirectory 為assets, 那么這些 URLs將需要被替換為 /assets/[filename].

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論