1. 程式人生 > >vue2.0 資原始檔assets和static的區別

vue2.0 資原始檔assets和static的區別

資原始檔處理
在我們的專案結構裡,有兩個資原始檔的路徑,分別是:src/assets 和 static/。那這兩個到底有什麼區別呢?
Webpacked 資源
為了回答這個問題,我們首先需要理解webpack是怎樣處理靜態資源的。在*.vue元件中,所有的templates和css都會被vue-html-loader 和 css-loader解析,尋找資源的URL。
舉個例子,在<img src="./logo.png"> 和 background: url(./logo.png), “./logo.png”中,都是相對資源路徑,都會被Webpack解析成模組依賴 。
由於logo.png不是JavaScript,當被看成一個模組依賴的時候,我們需要使用url-loader 和 file-loader進行處理。 該模板已經配置好了這些loaders,所以你能夠使用相對/模組路徑時不需要擔心部署的問題。由於這些資源可能在構建的時候被內聯/複製/重新命名, 所以它們從本質上來說是你原始碼的一部分。這就是為什麼我們建議將交由webpack處理的靜態資源和其它原始檔一樣放在/src路徑下面。實際上,你甚至不需要把它們全都放在/src/assets路徑下:你可以基於模組/元件的使用來組織檔案結構。例如,你可以把每個元件和屬於它的靜態資源放在它自己的目錄下。

資源處理規則
相對URL, e.g. ./assets/logo.png 將會被解釋成一個模組依賴。它們會被一個基於你的Webpack輸出配置自動生成的URL替代。沒有字首的URL, e.g. assets/logo.png 將會被看成相對URL,並且轉換成./assets/logo.png
字首帶~的URL 會被當成模組請求, 類似於require(‘some-module/image.png’). 如果你想要利用Webpack的模組處理配置,就可以使用這個字首。例如,如果你有一個對於assets的路徑解析,你需要使用<img src="~assets/logo.png">來確保解析是對應上的。相對根目錄的URL, e.g. /assets/logo.png 是不會被處理的

Javascript中獲取資源路徑
為了能讓Webpack返回正確的資源路徑,你需要使用require(‘./relative/path/to/file.jpg’),由file-loader進行解析,然後返回處理過的URL。例如:

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

注意上面的例子,在最終的構建時將會包含./bgs/路徑下的所有圖片 這是因為Webpack不能猜出來在執行時會用到其中的哪個,所以會包含所有的。
“真實的” 靜態資源
作為對比,在static/下的檔案都不會被Webpack處理:它們使用相同的檔名,直接拷貝到最終的路徑。你必須使用絕對路徑來引用這些檔案,取決於在config.js裡面加入的build.assetsPublicPath 和 build.assetsSubDirectory。
舉個例子,下面的預設值是:

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

所有放在 static/目錄下的檔案都應該是使用絕對URL/static/[filename]引用的。如果你將assetSubDirectory的值改成assets, 那麼這些URL就會被變成 /assets/[filename]