詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題
更新時(shí)間：2018年03月06日 10:16:26 作者：GDUT_YIFEI
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
使用vue打包，通過(guò)css引用圖片資源。
.img {
height: 500px;
width: 100%;
background: url("./assets/img/1.jpg") no-repeat;
background-size: 100%;
}
熱更新開(kāi)發(fā)環(huán)境的效果是這樣
但打完包出來(lái)的頁(yè)面卻報(bào)找不到資源的錯(cuò)誤。
查了一下原因，css引入圖片再打包后，style-loader無(wú)法設(shè)置自己的publicPath，于是我改變了ExtractTextPlugin的css路徑publicPath。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// css 引用圖片打包問(wèn)題
publicPath: '../../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
在build一次，沒(méi)有報(bào)錯(cuò)，正常顯示！
以上這篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue的面包屑導(dǎo)航組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開(kāi)發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過(guò)程
基礎(chǔ)組件開(kāi)發(fā)是項(xiàng)目業(yè)務(wù)開(kāi)發(fā)的基石, 本文主要介紹了通過(guò)vue3的vite腳手架快速搭建項(xiàng)目, 開(kāi)發(fā)條形碼和二維碼組件的過(guò)程,感興趣的朋友跟隨小編一起看看吧2023-08-08
這篇文章主要介紹了vue.js中ref及$refs的使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
解決vue路由組件vue-router實(shí)例被復(fù)用問(wèn)題
這篇文章介紹了解決vue路由組件vue-router實(shí)例被復(fù)用的問(wèn)題，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue 在服務(wù)器端直接修改請(qǐng)求的接口地址
這篇文章主要介紹了vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)文章，有興趣的朋友們學(xué)習(xí)下。2019-11-11
Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09