webpack+vueでエイリアスパスを使用して静的画像アドレスを参照する例の詳細説明

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とcss-loaderは非rootを翻訳しますURL を相対パスとして扱うには、エイリアスの前に ~

を追加して、モジュール パスのように扱います。

これは、これがモジュールであり、相対パスではないことをローダーに伝えます

注: スクリプトに追加する必要があるのは、テンプレート内の静的ファイル アドレスとスタイル内の静的ファイル アドレスのみです。エイリアスが定義されているものを何でも書くだけです。

この時点で、私は数か月間苦労していましたが、ついに問題が解決されました...

ところで、私が使用しているエイリアスのリストを投稿します:

alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}

関連する推奨事項:

ページ上のすべての画像アドレスを取得するための PHP 正規コード例

画像を処理する正規表現 アドレスと img タグのメソッドの概要と共有

画像アドレス (img src) を置き換える方法JavaScript 正規表現を使用した文字列内

以上がwebpack+vueでエイリアスパスを使用して静的画像アドレスを参照する例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。