webpack+vue中使用別名路徑引用靜態(tài)圖片地址
webpack 的別名好處大家也都了解, 但是 vue 的模板中, 對(duì)圖片地址使用別名時(shí)總出現(xiàn)問(wèn)題, 很久時(shí)間的時(shí)間都沒(méi)找到解決辦法, 一度認(rèn)為是 webpack 的原因...
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
<template>
<img src="assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
background: url(asset/images/bg.jpg)
}
</style>
上面的代碼, 你會(huì)發(fā)現(xiàn)只有引入style.css是成功的, 圖片地址和背景圖片地址都會(huì)解析失敗...
經(jīng)過(guò)各種搜索找原因(這時(shí)候, 你會(huì)發(fā)現(xiàn)百度搜索這些技術(shù)型的內(nèi)容, 真是垃圾中的戰(zhàn)斗機(jī)), 最終還是找到原因了...
vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
就是要在別名前面加一個(gè)~
最終代碼寫成:
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
<template>
<img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
background: url(~asset/images/bg.jpg)
}
</style>
意思就是: 告訴加載器它是一個(gè)模塊，而不是相對(duì)路徑
注意: 只有在template中的靜態(tài)文件地址和style中的靜態(tài)文件地址需要加~, 在script里的, 別名定義成什么就寫什么.
到此, 糾結(jié)了幾個(gè)月時(shí)間的問(wèn)題, 終于解決了...
順便貼下自己使用的別名列表:
alias: {
'assets': path.resolve(__dirname, '../src/assets'),
'src': path.resolve(__dirname, '../src'),
'~api': path.resolve(__dirname, '../src/api'),
'~components': path.resolve(__dirname, '../src/components'),
'~pages': path.resolve(__dirname, '../src/pages'),
'~router': path.resolve(__dirname, '../src/router'),
'~store': path.resolve(__dirname, '../src/store'),
'~utils': path.resolve(__dirname, '../src/utils')
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在Vue中Refs是對(duì)DOM元素或已安裝到DOM的其他組件實(shí)例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
swiper是我之前做前端頁(yè)面會(huì)用到的一個(gè)插件,我自己認(rèn)為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue驗(yàn)證用戶名是否可用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
對(duì)于日常使用vue3開(kāi)發(fā)項(xiàng)目的前端小伙伴來(lái)說(shuō),組件通信方式可以說(shuō)是必會(huì)的基本功,今天帶大家一起盤下vue3中的14種通信方式,希望對(duì)大家有所幫助2025-01-01
vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)的相關(guān)資料,文中通過(guò)圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來(lái)的值，但總有需要修改的時(shí)候，這篇文章主要介紹了vue中修改props傳進(jìn)來(lái)的值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡(jiǎn)單點(diǎn)說(shuō)就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下2024-02-02
本文是作者通過(guò)實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來(lái)，希望讀者讀完本文，有一定的啟發(fā)思考，從而對(duì)自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
在Vue中,有多種方式可以實(shí)現(xiàn)模糊查詢,這篇文章主要介紹了5種vue中的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08