You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。

modern プロパティ

ビルドとモダンなバンドルの提供


この機能は vue-cli の modern mode にインスパイアされています

  • 型: String または Boolean
    • デフォルト: false
    • 設定できる値:
      • 'client': モダンバンドル <script type="module"> とレガシーバンドル <script nomodule> スクリプトの両方を提供し、モダンバンドル用の <link rel="modulepreload"> も提供します。module タイプを理解するすべてのブラウザではモダンバンドルをロードしますが、古いブラウザではレガシー(トランスパイルされた)バンドルにフォールバックします。
      • 'server' または true: Node.js サーバーは、ユーザーエージェントに基づいてブラウザのバージョンをチェックし、対応するモダンバンドルまたはレガシーバンドルを提供します。
      • false: モダンビルドを無効にします

2 つのバージョンのバンドルについて:

  1. モダンバンドル: ES modules をサポートするモダンなブラウザを対象にしています。
  2. レガシーバンドル: babel config(デフォルトでは IE9 互換)をベースにした古いブラウザを対象にしています。

情報:

  • モダンバンドルでビルド/スタートするにはコマンドオプション [--modern | -m]=[mode] を使ってください:
package.json
{
  "scripts": {
    "build:modern": "nuxt build --modern=server",
    "start:modern": "nuxt start --modern=server"
  }
}

nuxt generate に関する注意: modern プロパティは nuxt generate コマンドでも動作しますが、この場合は client オプションだけが優先され nuxt generate --modern コマンドを値なしで実行した際に自動的に選択されます。

  • modern が指定されていない場合、Nuxt は nuxt startmodern ビルドを自動的に検出します。自動検出モードは次のとおりです:
ssr モダンモード
true server
false client
  • nuxt generate のモダンモードは client のみになります。
  • render.crossorigin を使って <link><script> タグに crossorigin 属性を設定します。

モダンビルドについての詳細は Phillip Walton さんの素晴らしい投稿 を参照してください。