アセット

Nuxt.js はアセットファイルを配信するために(デフォルトでは)Webpack のローダーとして vue-loader、file-loader 及び url-loader を使います。しかし Webpack の取り扱う対象としない静的ファイル専用のディレクトリを使うこともできます。

Webpack で取り扱う

デフォルトでは vue-loadercss-loader 及び vue-template-compiler を用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、<img src="...">background: url(...) や CSS @import などのすべての URL はモジュールの依存関係のように解決されます。

例えば、次のようなファイルがあるとします:

-| assets/
----| image.png
-| pages/
----| index.vue

CSS で url('~assets/image.png') と書いていたら、それは require('~assets/image.png') に変換されます。

あるいは pages/index.vue の中で下記のように書いていたとします:

<template>
  <img src="~assets/image.png">
</template>

それは次のようにコンパイルされます:

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

PNG ファイル JavaScript ファイルではないため、Nuxt.js は Webpack が PNG ファイルを扱えるように file-loaderurl-loader を使う設定を行います。

file-loader と url-loader の役割:

  • file-loader はアセットファイルをどこにコピーし配置すべきか、また、ファイル名をどうすべきかを決定します。ファイル名は上手にキャッシュするためにバージョンのハッシュ値を含める等を行います。
  • url-loader はもしファイルサイズが閾値よりも小さければ、ファイルの内容を Base64 エンコードして埋め込みます。こうすると小さなファイルを取得するための HTTP リクエストの数を減らすことができます。一方で、もしファイルサイズが閾値よりも大きければ、自動的に file-loader にフォールバックします。

実際には Nuxt.js のデフォルトのローダー設定は次のようになっています:

[
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1KO
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1 KO
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
]

ファイルサイズが 1KB を下回るファイルはすべて Base64 エンコードされて埋め込まれます。反対に 1KB を上回る画像やフォントは(.nuxt ディレクトリ配下の)対応するディレクトリにコピーされます。このときファイル名はうまくキャッシュさせるためにバージョンのハッシュ値を含んだものになります。

アプリケーションを nuxt コマンドで起動するとき、pages/index.vue 内のテンプレートは下記のようになっており:

<template>
  <img src="~assets/image.png">
</template>

そこから次のように生成されます:

<img src="/_nuxt/img/image.0c61159.png">

これらのローダーの設定を更新したり、ローダーを使わないようにするには、ローダー設定 を参照してください。

Webpack で扱わない静的ファイル

Webpack で扱う対象となる assets ディレクトリを使いたくない場合は、プロジェクトのルートディレクトリに static ディレクトリを作成して利用することができます。

これらのファイルは自動的に Nuxt.js により配信され、またプロジェクトのルート URL からアクセス可能になります。

このオプションは robots.txtsitemap.xmlCNAME(GitHub Pages などで使う)などのファイルの扱いに役立ちます。

/ URL からそれらのファイルを参照できます:

<!-- static ディレクトリの(Webpack で扱わない)静的な画像 -->
<img src="/my-image.png"/>

<!-- assets ディレクトリの Webpack で扱われた画像 -->
<img src="~/assets/my-image-2.png"/>

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する