本番環境向けビルド

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

ブラウザの互換性

デフォルトでは、本番バンドルは Baseline の Widely Available ターゲットに含まれるモダンなブラウザを想定しています。デフォルトのブラウザサポート範囲は次のとおりです。

Chrome >=107
Edge >=107
Firefox >=104
Safari >=16

build.target 設定オプションでカスタムターゲットを指定できます。最低ターゲットは es2015 です。より低いターゲットが設定されても、Vite はネイティブ ESM 動的インポートと import.meta に依存するため、以下の最小ブラウザサポート範囲を必要とします。

Chrome >=64
Firefox >=67
Safari >=11.1
Edge >=79

デフォルトでは、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": "./" または "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 { dirname
, resolve
 } from 'node:path'
import { fileURLToPath
 } from 'node:url'
import { defineConfig
 } from 'vite'

const __dirname
 = dirname
(fileURLToPath
(import.meta.url
))

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 { dirname
, resolve
 } from 'node:path'
import { fileURLToPath
 } from 'node:url'
import { defineConfig
 } from 'vite'

const __dirname
 = dirname
(fileURLToPath
(import.meta.url
))

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 { dirname
, resolve
 } from 'node:path'
import { fileURLToPath
 } from 'node:url'
import { defineConfig
 } from 'vite'

const __dirname
 = dirname
(fileURLToPath
(import.meta.url
))

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

CSS ファイルを 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"
    },
    "./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、および画像などのその他のファイルタイプ)
コピーされた公開ファイル

これらのシナリオでは、単一の静的ベースでは不十分です。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 サポート

高度なベースオプション