アセット URL ハンドリング

デフォルトで vue-loader は css-loader と Vue テンプレートコンパイラーでスタイルとテンプレートファイルは自動で処理されます。このコンパイル処理中で全ての <img src="..."> 、background: url(...) や CSS の @import のようなアセットの URL は モジュールの依存関係として処理されます。

例えば、url(./image.png) は require('./image.png') に変換され、そして

<img src="../image.png">

このようにコンパイルされます:

createElement('img', { attrs: { src: require('../image.png') }})

変換ルール

  • URL が絶対パス (例: ./images/foo.png) の場合、そのままの状態で維持されます。

  • URL が . による開始である場合、相対的なモジュール要求として解釈され、ファイルシステムのフォルダ構造に基いて解決されます。

  • URL が ~ による開始である場合、モジュール要求として解釈された後、何もしません。これは、Node モジュール内部でアセットを参照することもできます:

    <img src="~some-npm-package/foo.png">

  • (13.7.0以降) URL が @ による開始である場合、モジュール要求として解釈されます。これは、webpack 設定ファイルに @ のエイリアスがある場合は、便利です。デフォルトでは、vue-cli によって作成されたプロジェクトでは ./src を指します。

関連ローダー

もちろん .png ファイルは JavaScript のファイルではありません。file-loader または url-loader を使用して webpack を設定する必要があります。vue-cli でスキャフォールドされたプロジェクトでは同じような設定がなされています。

なぜなのか

利点の全ては次の通りです:

  1. file-loader はアセットファイルのコピー先や配置先を制定したり、バージョンハッシュを利用してキャッシングを改善する方法を指定する事が出来ます。さらに、これは、単にあなたの * .vue ファイルの隣にイメージを置くことができ、配備するURLを心配するのではなくフォルダ構造に基づいて相対パスを使用することを意味します。
  2. url-loader は、指定されたしきい値よりも小さい場合、条件付きでファイルを base-64 データ URL としてインライン化することができます。これにより、単純なファイルに対する HTTP リクエストの量を減らすことができます。 ファイルがしきい値より大きい場合、自動的に file-loader にフォールバックします。

results matching ""

    No results matching ""