使用vue打包，通過css引用圖片資源。

.img { 
 height: 500px; 
 width: 100%; 
 background: url("./assets/img/1.jpg") no-repeat; 
 background-size: 100%; 
 } 

熱更新開發(fā)環(huán)境的效果是這樣

但打完包出來的頁(yè)面卻報(bào)找不到資源的錯(cuò)誤。

查了一下原因，css引入圖片再打包后，style-loader無法設(shè)置自己的publicPath，于是我改變了ExtractTextPlugin的css路徑publicPath。

if (options.extract) { 
 return ExtractTextPlugin.extract({ 
 use: loaders, 
 // css 引用圖片打包問題 
 publicPath: '../../../', 
 fallback: 'vue-style-loader' 
 }) 
 } else { 
 return ['vue-style-loader'].concat(loaders) 
 } 

在build一次，沒有報(bào)錯(cuò)，正常顯示！

以上這篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com