webpack+vue中使用別名路徑引用靜態(tài)圖片地址

發(fā)布時(shí)間：2020-10-14 21:57:17 來源：腳本之家閱讀：808 作者：M.M.F 欄目：web開發(fā)

webpack 的別名好處大家也都了解, 但是 vue 的模板中, 對圖片地址使用別名時(shí)總出現(xiàn)問題, 很久時(shí)間的時(shí)間都沒找到解決辦法, 一度認(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)過各種搜索找原因(這時(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è)模塊，而不是相對路徑

注意: 只有在template中的靜態(tài)文件地址和style中的靜態(tài)文件地址需要加~, 在script里的, 別名定義成什么就寫什么.
到此, 糾結(jié)了幾個(gè)月時(shí)間的問題, 終于解決了...

順便貼下自己使用的別名列表:

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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

webpack+vue中使用別名路徑引用靜態(tài)圖片地址

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽