Vue2 模板中的圖片地址如何使用 webpack 定義的別名?

webpack 的別名好處你們也都瞭解, 可是 vue 的模板中, 對圖片地址使用別名時總出現問題, 好久時間的時間都沒找到解決辦法, 一度認爲是 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>

上面的代碼, 你會發現只有引入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: {
  '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中的靜態文件地址和style中的靜態文件地址須要加~, 在script裏的, 別名定義成什麼就寫什麼.
簡單吧, 然而沒找到緣由前, 你壓根就沒辦法...
到此, 糾結了幾個月時間的問題, 終於解決了...