首頁  >  文章  >  web前端  >  webpack+vue中使用別名路徑引用靜態圖片位址實例詳解

webpack+vue中使用別名路徑引用靜態圖片位址實例詳解

小云云
小云云原創
2018-01-16 10:29:232059瀏覽

webpack 的別名好處大家也都了解, 但是 vue 的模板中, 對圖片地址使用別名時總出現問題, 很久時間的時間都沒找到解決辦法, 一度認為是 webpack 的原因。本文主要介紹了webpack+vue中使用別名路徑引用靜態圖片地址,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。


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 &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>

上面的程式碼, 你會發現只有引入style.css是成功的, 圖片地址和背景圖片地址都會解析失敗...

經過各種搜尋找原因(這時候, 你會發現百度搜尋這些技術型的內容, 真是垃圾中的戰鬥機), 最終還是找到原因了...

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: {
 &#39;src&#39;: path.resolve(__dirname, &#39;../src&#39;),
 &#39;assets&#39;: path.resolve(__dirname, &#39;../src/assets&#39;),
 &#39;components&#39;: path.resolve(__dirname, &#39;../src/components&#39;)
}


<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

意思就是: 告訴載入器它是模組,而不是相對路徑

注意: 只有在template中的靜態文件地址和style中的靜態文件地址需要加~, 在script裡的, 別名定義成什麼就寫什麼.
到此, 糾結了幾個月時間的問題, 終於解決了...

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


alias: {
  &#39;assets&#39;: path.resolve(__dirname, &#39;../src/assets&#39;),
  &#39;src&#39;: path.resolve(__dirname, &#39;../src&#39;),
  &#39;~api&#39;: path.resolve(__dirname, &#39;../src/api&#39;),
  &#39;~components&#39;: path.resolve(__dirname, &#39;../src/components&#39;),
  &#39;~pages&#39;: path.resolve(__dirname, &#39;../src/pages&#39;),
  &#39;~router&#39;: path.resolve(__dirname, &#39;../src/router&#39;),
  &#39;~store&#39;: path.resolve(__dirname, &#39;../src/store&#39;),
  &#39;~utils&#39;: path.resolve(__dirname, &#39;../src/utils&#39;)
}

相關推薦:

PHP正規取得頁面所有圖片位址的程式碼範例

#正規表示式處理圖片位址、img標籤的方法摘要分享

JavaScript正規表示式替換字串中圖片位址(img src)的方法

#

以上是webpack+vue中使用別名路徑引用靜態圖片位址實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn