Vue在css中圖片路徑問題解決的配置方法
css外設(shè)置background-image
在css外設(shè)置background-image時(shí)，不能直接使用url，應(yīng)該使用
<li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>在css中設(shè)置background-image時(shí)，使用相對路徑在webpack打包后出現(xiàn)問題，圖片路徑到了static下
在build/util.js中配置publicPath：“../../”
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
webpack對css文件打包時(shí)會驗(yàn)證圖片資源是否獲取成功，若找不到資源文件，就會報(bào)錯。同時(shí)注釋的資源圖片也會進(jìn)行檢查。
在webpack.base.conf.js中使用別名（resolve.alias）解決scss @import相對路徑問題(webpack5以上版本會自動配置@為當(dāng)前目錄src)：
當(dāng)遇到樣式過多時(shí)或者公共樣式，我們會將樣式單獨(dú)寫在一個(gè)文件夾common.scss;
配置別名：@相當(dāng)于目錄src
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}兩種引入方式
在js中：
//原來是這樣寫 import './../src/scss/common.scss'; //定義別名后可以這樣寫 import '@/scss/common.scss';
在scss文件中：注意在這里需要加~在@符號前面
//原本這樣寫 @import './../scss/common.scss'; //現(xiàn)在這樣寫 @import '~@/scss/common.scss';
使用別名不僅簡單方便，同時(shí)避免了相對路徑使用時(shí)出現(xiàn)的問題，例如在a.scss文件中引入b.scss
//a.scss
@import '@/scss/module/b.scss';
//b.scss
div{
background-image: url('~@/assets/images/1.png');
}
這時(shí)再在另外的文件中引入a.scss，則b文件中的圖片資源的相對路徑就會改變，找不到資源圖片報(bào)錯。如果使用上面方法則會避免這些錯誤。
注意：如果你的引入的樣式文件格式為scss則，在style標(biāo)簽上應(yīng)設(shè)置：（css，less等同理，在js中引入沒有這個(gè)顧慮）
<style lang="scss" scoped>
@import '~@/styles/register/main.scss';
</style>為了避免不必要的錯誤，最好在css中引入css樣式，scss中引入scss樣式，不要混淆。
以上就是Vue在css中圖片路徑問題解決的詳細(xì)內(nèi)容，更多關(guān)于Vue css圖片路徑的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue車牌號校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在Vue3中創(chuàng)建和使用自定義指令的實(shí)現(xiàn)方式
在現(xiàn)代前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,它提供了許多強(qiáng)大的功能來幫助開發(fā)者構(gòu)建高效的用戶界面,自定義指令是 Vue.js 的一個(gè)重要特性,它允許開發(fā)者擴(kuò)展 HTML 元素的功能,本文將詳細(xì)介紹如何在 Vue3 中創(chuàng)建和使用自定義指令,并提供示例代碼來幫助理解2024-12-12
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11
vue3中的watch是一個(gè)組合式的API使用時(shí)需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue2中如何使用全局事件總線實(shí)現(xiàn)任意組件間通信
全局事件總線就是一種組件間通信的方式,適用于任意組件間通信,下面這篇文章主要給大家介紹了關(guān)于Vue2中如何使用全局事件總線實(shí)現(xiàn)任意組件間通信的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類庫,其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
文章主要內(nèi)容是關(guān)于如何在項(xiàng)目中引入依賴項(xiàng)以及編寫組件代碼的步驟和總結(jié),作者分享了個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考,并鼓勵大家支持腳本之家2024-12-12
vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue將后臺數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式
這篇文章主要為大家詳細(xì)介紹了vue將后臺數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05