詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題
更新時間：2018年03月06日 10:16:26 作者：GDUT_YIFEI
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用vue打包，通過css引用圖片資源。
.img {
height: 500px;
width: 100%;
background: url("./assets/img/1.jpg") no-repeat;
background-size: 100%;
}
熱更新開發(fā)環(huán)境的效果是這樣
但打完包出來的頁面卻報找不到資源的錯誤。
查了一下原因，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一次，沒有報錯，正常顯示！
以上這篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue filter 完美時間日期格式的方法，文中給大家提到了vue filter方法-時間格式化 的代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
結(jié)合el-upload組件實現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個新需求，要求在el-upload組件基礎(chǔ)上實現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個功能怎么實現(xiàn)呢?一起看看吧2022-09-09
vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
利用Vue+intro.js實現(xiàn)頁面新手引導(dǎo)流程功能
在同學(xué)們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導(dǎo)一樣的效果,來幫助同學(xué)們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實現(xiàn)頁面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下2023-11-11
element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法
當頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法,需要的朋友可以參考下2023-02-02
基于Vue3實現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁開發(fā)中,用戶體驗日益成為網(wǎng)站成功的重要因素,從加載時間到SEO優(yōu)化,越來越多的開發(fā)者開始關(guān)注使用服務(wù)端渲染（SSR）來提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
本文主要介紹了Vue3父子組件互調(diào)方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04