處理靜態(tài)資源

你也許會注意到vue-cli與webpack結(jié)合的項目中，我們通常會有兩個靜態(tài)資源的路徑：src/assets和static/，他們兩者的區(qū)別是什么呢？

打包的資源

為了回答這個問題，我們首先要明白Webpack是如何處理靜態(tài)資源的。在*.vue組件里，所有的templates和CSS模塊都被vue-html-loader和css-loader解析來查找路徑URL。

舉個例子，在<img src"./logo.png">和背景background: url(./logo.png)，”./logo.png”是一個相對路徑，會被Webpack當(dāng)做一個依賴加載。

但是因為logo.png并不是JavaScript，所以如果被當(dāng)成一個依賴的花，我們需要通過url-loader和file-loader來解析它。這個模板已經(jīng)為你配置了相應(yīng)的loader，所以你通常不用擔(dān)心相對路徑的部署問題。

即使這些資源有可能在構(gòu)建過程中被內(nèi)聯(lián)/拷貝/重命名，他們也是源碼重要組成部分。這就是為什么我們建議單獨在/src文件夾里放置靜態(tài)資源，如同其他的資源文件夾。

事實上，你都不必把他們?nèi)旁?src/assets，你可以根據(jù)模塊/組件來組織利用他們。比如說，你可以把任一組件放到他們自己的目錄，并在該目錄下存放靜態(tài)資源。

資源引入規(guī)則

相對路徑，比如 ./assets/logo.png會被解析成模塊依賴。它們會被一個基于你Webpack輸出配置的自動生成URL替代。

沒有前綴的路徑，比如assets/logo.png，同相對路徑，轉(zhuǎn)義成./assets/logo.png

有~前綴的路徑。 ~被認為是一個模塊請求，同require('some-module/image.png')。根路徑，比如/assets/log.png

在JavaScript得到資源路徑

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

這個資源路徑同樣會被file-loader處理然后返回處理后的路徑。而且Webpack會一次性加載該bgs目錄下的所有圖片。

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

與此相對的，static/中的文件全都不會被Webpack處理。它們將被直接拷貝到目標文件夾，引用這些文件需要使用絕對路徑。

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

最新評論