您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue-cli與webpack結(jié)合怎么處理靜態(tài)資源的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
處理靜態(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
有~前綴的路徑。 ~被認(rèn)為是一個模塊請求,同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處理。它們將被直接拷貝到目標(biāo)文件夾,引用這些文件需要使用絕對路徑。
感謝各位的閱讀!關(guān)于“vue-cli與webpack結(jié)合怎么處理靜態(tài)資源”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。