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è)~
最終代碼寫(xiě)成:
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里的, 別名定義成什么就寫(xiě)什么.
到此, 糾結(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開(kāi)發(fā)項(xiàng)目的時(shí)候，計(jì)算屬性computed是一個(gè)非常常用的特性，本文就來(lái)分享一些使用Vue的computed計(jì)算屬性時(shí)的一些小技巧，希望能夠幫助到大家2023-06-06
vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過(guò)程
最近看完Vue3和Vite文檔之后,就寫(xiě)了個(gè)小demo,整體感覺(jué)下來(lái)還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過(guò)程,需要的朋友可以參考下2022-07-07
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了vue切換菜單取消未完成接口請(qǐng)求的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
vue3使用particles插件實(shí)現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實(shí)現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
因?yàn)楝F(xiàn)在vue的流行,vue的各種插件都出來(lái)了,我們公司也是使用vue做項(xiàng)目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01