問題
項目在開發(fā)環(huán)境下工作正常,當(dāng)打包后圖片不見了,檢查元素后發(fā)現(xiàn)路徑出錯了。
圖片路徑是這樣:background: url(/static/img/bg_camera_tip.bd37151.png),但該路徑下文件并不存在。
打包后文件目錄如下:
可以看到背景圖片的路徑應(yīng)該是../../static而實際卻是/static,找到原因后就好解決了
方法一
查看build目錄下webpack.base.conf.js的配置,圖片文件會經(jīng)過url-loader處理。
module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
它的作用是當(dāng)文件大小小于limit限制時會返回一個base64串,其實就是把圖片資源編碼為base64串放在CSS文件里,這樣就可以減少一次網(wǎng)絡(luò)請求,因為每一張圖片都是需要從服務(wù)端去下載的。但是如果文件太大了就會導(dǎo)致base64串很長,那放在CSS文件里面就會導(dǎo)致文件很大,CSS的文件下載時間變長,就得不償失了,所以會有一個limit參數(shù),在這個范圍內(nèi)的才會被轉(zhuǎn)成base64串,它的單位是字節(jié)。對于這個問題,該loader還提供了一個publicPath參數(shù),目的是修改引用的圖片地址,默認(rèn)是當(dāng)前路徑,那直接改它就可以了,即在options節(jié)點下添加一個參數(shù)publicPath: '../../'。
module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, publicPath: '../../', //你實際項目的引用地址前綴 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
方法二
webpack.base.conf.js里還有一條規(guī)則,每一個vue文件都會經(jīng)過vueLoaderConfig處理
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, ... ] }
vueLoaderConfig位于build/vue-loader.conf.js,它又調(diào)用了build/utils.js的cssLoaders的方法。
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) }
如果是生產(chǎn)環(huán)境options.extract值為true,會調(diào)用這個ExtractTextPlugin插件做處理,它的作用是抽離項目中引用的樣式文件到一個獨立的CSS文件中,這樣就可以一次加載所有的CSS文件,相當(dāng)于CSS文件并行加載,可以減少網(wǎng)絡(luò)請求次數(shù),更多優(yōu)點及使用可以查看ExtractTextWebpackPlugin。回到這個問題,它還有一個參數(shù)就是publicPath,可以覆蓋所指定的loader的publicPath配置,那么就跟前面的配置一樣,可以給所有的loader統(tǒng)一配置引用文件的路徑地址。
另外這里的user:loader實際上是返回一系列的loader的集合,cssLoaders的返回是
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
這也就是即便你沒有在webpack.base.conf.js中配置sass-loader也能使用SASS語法的原因。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com