快捷導(dǎo)航

vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑

更新時(shí)間：2018年05月15日 16:29:57 投稿：mrr

這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下

通過(guò)Vue-cli進(jìn)行webpack打包的坑

Vue-cli為Vue項(xiàng)目搭建的腳手架的確很方便，但打包時(shí)容易出現(xiàn)空白頁(yè)，或者對(duì)應(yīng)的靜態(tài)資源加載不了。

我是通過(guò)將項(xiàng)目/config下的index.js的assetsPublicPath變成'./'，變成相對(duì)路徑，進(jìn)行解決。

cd vue demo 
 npm run dev //運(yùn)行程序 
npm run bulid //webpack打包

處理靜態(tài)資源

你也許會(huì)注意到vue-cli與webpack結(jié)合的項(xiàng)目中，我們通常會(huì)有兩個(gè)靜態(tài)資源的路徑：src/assets和static/，他們兩者的區(qū)別是什么呢？本文主要和大家介紹了vue-cli與webpack結(jié)合如何處理靜態(tài)資源，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望能幫助到大家。

打包的資源

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

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

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

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

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

資源引入規(guī)則

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

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

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

在JavaScript得到資源路徑

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

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

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

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

總結(jié)

以上所述是小編給大家介紹的vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: