本番ビルド

本番用にアプリケーションをデプロイする場合は、単純に vite build コマンドを実行してください。デフォルトでは、ビルドのエントリポイントとして <root>/index.html が使用され、静的ホスティングサービス上で提供するのに適したアプリケーションバンドルが生成されます。一般的なサービスに関するガイドについては、静的サイトのデプロイを参照してください。

ブラウザの互換性

本番用バンドルでは、最新の JavaScript がサポートされていると想定されます。デフォルトでは、Vite はネイティブ ES モジュール、ネイティブ ESM の動的インポート、import.meta をサポートするブラウザをターゲットにします。

Chrome >=87
Firefox >=78
Safari >=14
Edge >=88

build.target 設定オプションを使用してカスタムターゲットを指定できます。最低のターゲットは es2015 です。

デフォルトでは、Vite は構文変換のみを処理し、ポリフィルは含まれないことに注意してください。 ユーザーのブラウザの UserAgent 文字列に基づいてポリフィルバンドルを自動的に生成する https://cdnjs.cloudflare.com/polyfill/ を確認できます。

レガシーブラウザは @vitejs/plugin-legacy でサポートされ、レガシーチャンクと対応する ES 言語機能ポリフィルが自動的に生成されます。レガシーチャンクは、ネイティブ ESM をサポートしていないブラウザでのみ条件付きで読み込まれます。

パブリックベースパス

関連: アセットの処理

ネストされたパブリックパスを使用してプロジェクトをデプロイしている場合は、base の構成オプションを指定するだけで、すべてのアセットパスがそのように書き換えられます。このオプションはコマンドラインフラグとして指定することもできます。例: vite build --base=/my/public/path/。

JS でインポートされたアセットの URL、CSS url() 参照、および .html ファイルのアセット参照は、すべてビルド中に自動的に調整されてこのオプションが尊重されます。

このオプションは、動的に URL を連結する必要がある場合を除きます。その場合、パブリックベースパスになるグローバルに注入された import.meta.env.BASE_URL 変数を使用できます。この変数はビルド中に静的に置き換えられるので、そのまま表記されている必要があります(つまり、import.meta.env['BASE_URL'] は動作しません)。

高度なベースパス制御については、高度なベースオプションを参照してください。

相対ベース

ベースパスを事前に知らない場合は、「base」を「./」または「""」に設定して相対ベースパスを設定できます。これにより、生成されたすべての URL が各ファイルに対して相対的になります。

相対ベースを使用する場合の古いブラウザのサポート

import.meta のサポートは相対ベースで必要です。 import.meta をサポートしていないブラウザをサポートする必要がある場合は、legacy プラグインを使用できます。

ビルドのカスタマイズ

ビルドは、さまざまなビルド構成オプションでカスタマイズできます。具体的には、build.rollupOptions 経由で基礎となる Rollup オプションを直接調整できます。

vite.config.js

export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollup.dokyumento.jp/configuration-options/
    },
  },
})

たとえば、ビルド時のみ適用されるプラグインを使用して、複数の Rollup 出力を指定できます。

チャンク化戦略

build.rollupOptions.output.manualChunks を使用して、チャンクが分割される方法を構成できます( Rollup ドキュメントを参照してください)。フレームワークを使用する場合は、チャンクが分割される方法の構成についてフレームワークのドキュメントを参照してください。

ロードエラーの処理

ダイナミックインポートのロードに失敗すると、Vite は vite:preloadError イベントを発行します。 event.payload には、元々のインポートエラーが含まれています。 event.preventDefault() を呼び出すと、エラーはスローされません。

window
.addEventListener
('vite:preloadError', (event
) => {
  window
.location
.reload
() // for example, refresh the page
})

新しいデプロイが発生すると、ホスティングサービスは前回のデプロイからのアセットを削除することがあります。そのため、新しいデプロイ前にサイトにアクセスしたユーザーはインポートエラーが発生する可能性があります。このエラーは、ユーザーのデバイスで実行されているアセットが古く、削除された対応する古いチャンクをインポートしようとしているために発生します。このイベントはこの状況に対処するのに役立ちます。

ファイルの変更時に再構築

vite build --watch で Rollup ウォッチャーを有効にできます。または、build.watch 経由で基礎となる WatcherOptions を直接調整できます。

vite.config.js

export default defineConfig({
  build: {
    watch: {
      // https://rollup.dokyumento.jp/configuration-options/#watch
    },
  },
})

--watch フラグが有効になっていると、vite.config.js とバンドル化するすべてのファイルの変更で再構築がトリガーされます。

マルチページアプリ

次のソースコード構造があるとします

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

開発中は単に /nested/ へナビゲートするかリンクします。これは通常の静的ファイルサーバーと同様に、期待どおりに機能します。

ビルド中は、エントリポイントとして複数の .html ファイルを指定する必要があります。

vite.config.js

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    rollupOptions
: {
      input
: {
        main
: resolve
(__dirname
, 'index.html'),
        nested
: resolve
(__dirname
, 'nested/index.html'),
      },
    },
  },
})

別のルートを指定した場合は、入力パスの解決時に __dirname が依然として vite.config.js ファイルのフォルダになるので注意してください。そのため、resolve の引数に root エントリを追加する必要があります。

HTML ファイルの場合、Vite は rollupOptions.input オブジェクトでエントリに与えられた名前を無視し、代わりに dist フォルダで HTML アセットを生成するときにファイルの解決された ID を尊重することに注意してください。これにより、開発サーバーの仕組みと一貫した構造が確保されます。

ライブラリモード

ブラウザ指向のライブラリを開発している場合、実際のライブラリをインポートするテスト/デモページにほとんど時間を費やしている可能性があります。Vite では、スムーズな開発エクスペリエンスを得るために index.html をその目的で使用できます。

ライブラリを配布するためにバンドルする場合は、build.lib 構成オプションを使用します。vue や react など、ライブラリにバンドルしたくない依存関係は外部化するようにしてください。

vite.config.js (単一エントリ)vite.config.js (複数エントリ)

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    lib
: {
      entry
: resolve
(__dirname
, 'lib/main.js'),
      name
: 'MyLib',
      // the proper extensions will be added
      fileName
: 'my-lib',
    },
    rollupOptions
: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external
: ['vue'],
      output
: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals
: {
          vue
: 'Vue',
        },
      },
    },
  },
})

import { resolve
 } from 'path'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    lib
: {
      entry
: {
        'my-lib': resolve
(__dirname
, 'lib/main.js'),
        secondary
: resolve
(__dirname
, 'lib/secondary.js'),
      },
      name
: 'MyLib',
    },
    rollupOptions
: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external
: ['vue'],
      output
: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals
: {
          vue
: 'Vue',
        },
      },
    },
  },
})

エントリファイルには、パッケージのユーザーがインポートできるエクスポートが含まれます。

lib/main.js

import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }

この構成で vite build を実行すると、ライブラリの配信に重点を置いた Rollup プリセットが使用され、2 つのバンドル形式が生成されます。

es と umd（単一エントリの場合）
es と cjs（複数エントリの場合）

フォーマットは build.lib.formats オプションで構成できます。

$ vite build
building for production...
dist/my-lib.js      0.08 kB / gzip: 0.07 kB
dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB

ライブラリ用の推奨 package.json

package.json (単一エントリ)package.json (複数エントリ)

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}

CSS サポート

ライブラリが CSS をインポートする場合、CSS はビルドされた JS ファイルの他に単一の CSS ファイルとしてバンドルされます（例：dist/my-lib.css）。名前はデフォルトでは build.lib.fileName ですが、build.lib.cssFileName を使用して変更することもできます。

パッケージの package.json で CSS ファイルをエクスポートし、ユーザーにインポートさせることができます。

json

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    },
    "./style.css": "./dist/my-lib.css"
  }
}

ファイル拡張子

package.json に "type": "module" が含まれていない場合、Vite は Node.js 互換性のために異なるファイル拡張子を生成します。.js は .mjs に、.cjs は .js になります。

環境変数

ライブラリモードでは、すべての import.meta.env.* 使用は、本番用にビルドするときに静的に置き換えられます。ただし、process.env.* の使用は置き換えられないため、ライブラリのコンシューマーは動的に変更できます。これが望ましくない場合は、define: { 'process.env.NODE_ENV': '"production"' } などを使用して静的に置き換えたり、esm-env を使用してバンドラーとランタイムとの互換性を向上させることができます。

高度な使用方法

ライブラリモードには、ブラウザ指向および JS フレームワークライブラリ用のシンプルで理念的な構成が含まれています。ブラウザ以外のライブラリを構築する場合、または高度なビルドフローが必要な場合は、Rollup または esbuild を直接使用できます。

高度な基本オプション

警告

この機能は実験的です。フィードバックを送信する。

高度なユースケースの場合、デプロイされたアセットとパブリックファイルが異なるパスにある場合があります。たとえば、異なるキャッシュ戦略を使用する場合などです。ユーザーは 3 つの異なるパスにデプロイすることを選択できます。

生成されたエントリHTMLファイル（SSR中に処理される場合がある）
生成されたハッシュ資産（JS、CSS、画像などのその他のファイルタイプ）
コピーされたpublicファイル

これらのシナリオでは、単一の静的ベースでは十分ではありません。Viteはexperimental.renderBuiltUrlを使用して、ビルド中に高度なベースオプションの実験的サポートを提供します。

experimental
: {
  renderBuiltUrl
(filename
, { hostType
 }) {
    if (hostType
 === 'js') {
      return { runtime
: `window.__toCdnUrl(${JSON
.stringify
(filename
)})` }
    } else {
      return { relative
: true }
    }
  },
},

ハッシュされた資産とパブリックファイルが一緒にデプロイされない場合、関数の2番目のcontextパラメータに含まれる資産typeを使用して、各グループのオプションを独立して定義できます。

experimental
: {
  renderBuiltUrl
(filename
, { hostId
, hostType
, type
 }) {
    if (type
 === 'public') {
      return 'https://www.domain.com/' + filename

    } else if (path
.extname
(hostId
) === '.js') {
      return {
        runtime
: `window.__assetsPath(${JSON
.stringify
(filename
)})`
      }
    } else {
      return 'https://cdn.domain.com/assets/' + filename

    }
  },
},

渡されたfilenameはデコードされたURLであることに注意し、関数がURL文字列を返す場合もデコードする必要があることに注意してください。ViteはURLのレンダリング中に自動的にエンコードを処理します。runtimeのあるオブジェクトが返される場合、ランタイムコードがそのままレンダリングされるため、必要に応じてエンコードを自分で処理する必要があります。

本番ビルド ​

ブラウザの互換性 ​

パブリックベースパス ​

相対ベース ​

ビルドのカスタマイズ ​

チャンク化戦略 ​

ロードエラーの処理 ​

ファイルの変更時に再構築 ​

マルチページアプリ ​

ライブラリモード ​

CSS サポート ​

高度な基本オプション ​

本番ビルド

ブラウザの互換性

パブリックベースパス

相対ベース

ビルドのカスタマイズ

チャンク化戦略

ロードエラーの処理

ファイルの変更時に再構築

マルチページアプリ

ライブラリモード

CSS サポート

高度な基本オプション