webpack+vueの中で別名のパスを使って静止画の住所を引用します。

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の中の別名は何と定義していますか？
これで数ヶ月間の問題を解決しました。
ついでに自分で使うエイリアスリストを貼り付けます。

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')
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。