解決vue打包c(diǎn)ss文件中背景圖片的路徑問題
更新時(shí)間：2018年09月03日 09:09:38 作者：shuhaha
今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue-cli寫完的靜態(tài)頁面我們在node環(huán)境中引入沒有問題，但是打包后放在Apache環(huán)境下，路徑卻有問題了
如一個(gè)簡單css語句
.welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat;
但是打包后路徑成了卻出現(xiàn)404訪問不到的問題。
解決的辦法很簡單
build路徑下utils.js文件
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加此代碼！??！
})
} else {
return ['vue-style-loader'].concat(loaders)
}
以上這篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ue3.2新增了一個(gè)指令v-memo,引入這個(gè)指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
在Vue.js開發(fā)中,雙向綁定是實(shí)現(xiàn)表單輸入與數(shù)據(jù)同步的核心特性之一,然而,在實(shí)際開發(fā)中,開發(fā)者可能會(huì)遇到雙向綁定失效的問題,導(dǎo)致表單輸入無法正確更新數(shù)據(jù)或視圖,本文將探討雙向綁定失效的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了如何封裝Vue Element的table表格組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-02-02
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue自定義filters過濾器的相關(guān)知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)
這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
在許多應(yīng)用程序中，我們經(jīng)常需要執(zhí)行定期的異步任務(wù)輪詢，本文就介紹了Vue3如何處理異步任務(wù)輪詢，感興趣的可以了解一下2023-05-05
這篇文章主要為大家詳細(xì)紹了vue2.0全局組件之pdf的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06