webpack+vue中使用別名路徑引用靜態(tài)圖片地址
更新時間：2017年11月20日 16:40:07 作者：M.M.F
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
webpack 的別名好處大家也都了解, 但是 vue 的模板中, 對圖片地址使用別名時總出現(xiàn)問題, 很久時間的時間都沒找到解決辦法, 一度認(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>
上面的代碼, 你會發(fā)現(xiàn)只有引入style.css是成功的, 圖片地址和背景圖片地址都會解析失敗...
經(jīng)過各種搜索找原因(這時候, 你會發(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 ~
就是要在別名前面加一個~
最終代碼寫成:
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>
意思就是: 告訴加載器它是一個模塊，而不是相對路徑
注意: 只有在template中的靜態(tài)文件地址和style中的靜態(tài)文件地址需要加~, 在script里的, 別名定義成什么就寫什么.
到此, 糾結(jié)了幾個月時間的問題, 終于解決了...
順便貼下自己使用的別名列表:
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')
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
vite+element-plus項目基礎(chǔ)搭建的全過程
最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項目基礎(chǔ)搭建的全過程,需要的朋友可以參考下2022-07-07
vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue切換菜單取消未完成接口請求的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
以v-model與promise兩種方式實現(xiàn)vue彈窗組件
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
vue3使用particles插件實現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了vue項目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01