Vite の設定

Vite はコマンドラインから vite を実行すると、プロジェクトルート内に vite.config.js という名前の設定ファイルを自動的に解決しようとします (他の JS および TS 拡張子もサポートされています)。

最も基本的な設定ファイルは次のようになります。

vite.config.js

export default {
  // config options
}

注: プロジェクトがネイティブの Node ESM (例: package.json の "type": "module") を使用していない場合でも、Vite は設定ファイルでの ES モジュール構文の使用をサポートしています。この場合、設定ファイルはロード前に自動的にプリプロセスされます。

--config CLI オプションを使用して、使用する設定ファイルを明示的に指定することもできます (cwd を基準に解決されます)。

bash

vite --config my-config.js

設定の読み込み

デフォルトでは、Vite は esbuild を使用して設定を一時ファイルにバンドルし、ロードします。これにより、モノレポで TypeScript ファイルをインポートする際に問題が発生する可能性があります。この方法で問題が発生した場合は、--configLoader runner を指定して、一時的な設定を作成せず、ファイルをその場で変換するモジュールランナーを使用できます。モジュールランナーは設定ファイル内の CJS をサポートしていませんが、外部の CJS パッケージは通常通り動作するはずです。

あるいは、TypeScript をサポートする環境 (例: node --experimental-strip-types) を使用している場合、または純粋な JavaScript のみで記述している場合は、--configLoader native を指定して、環境のネイティブランタイムを使用して設定ファイルをロードできます。設定ファイルによってインポートされたモジュールの更新は検出されないため、Vite サーバーは自動的に再起動しないことに注意してください。

設定のインテリセンス

Vite には TypeScript の型定義が含まれているため、jsdoc の型ヒントを使用して IDE のインテリセンスを活用できます。

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

あるいは、jsdoc のアノテーションなしでインテリセンスを提供する defineConfig ヘルパーを使用することもできます。

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite は TypeScript 設定ファイルもサポートしています。上記の defineConfig ヘルパー関数、または satisfies オペレーターと一緒に vite.config.ts を使用できます。

import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig

条件付き設定

設定がコマンド (serve または build)、使用中のモード、SSR ビルドかどうか (isSsrBuild)、またはビルドのプレビュー中かどうか (isPreview) に基づいてオプションを条件付きで決定する必要がある場合、代わりにファンクションをエクスポートできます。

export default defineConfig
(({ command
, mode
, isSsrBuild
, isPreview
 }) => {
  if (command
 === 'serve') {
    return {
      // dev specific config
    }
  } else {
    // command === 'build'
    return {
      // build specific config
    }
  }
})

Vite の API では、開発中は command の値が serve (CLI の vite、vite dev、vite serve はエイリアス)、本番用にビルドする場合は build (vite build) であることに注意することが重要です。

isSsrBuild と isPreview は、それぞれ build コマンドと serve コマンドの種類を区別するための追加のオプションフラグです。Vite の設定をロードする一部のツールは、これらのフラグをサポートしない場合があり、代わりに undefined を渡します。そのため、true と false に対して明示的に比較することをお勧めします。

非同期設定

設定が非同期関数を呼び出す必要がある場合、代わりに非同期関数をエクスポートできます。この非同期関数は、インテリセンスのサポートを向上させるために defineConfig を介して渡すこともできます。

export default defineConfig
(async ({ command
, mode
 }) => {
  const data
 = await asyncFunction()
  return {
    // vite config
  }
})

設定で環境変数を使用する

環境変数は通常通り process.env から取得できます。

Vite はデフォルトで .env ファイルをロードしないことに注意してください。これは、ロードするファイルが Vite 設定を評価した後にのみ決定できるためです。例えば、root と envDir オプションはロード動作に影響します。ただし、必要に応じて、エクスポートされた loadEnv ヘルパーを使用して特定の .env ファイルをロードできます。

import { defineConfig
, loadEnv
 } from 'vite'

export default defineConfig
(({ mode
 }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the
  // `VITE_` prefix.
  const env
 = loadEnv
(mode
, process
.cwd
(), '')
  return {
    // vite config
    define
: {
      __APP_ENV__
: JSON
.stringify
(env
.APP_ENV
),
    },
  }
})

VS Code で設定ファイルをデバッグする

デフォルトの --configLoader bundle 動作では、Vite は生成された一時設定ファイルを node_modules/.vite-temp フォルダーに書き込み、Vite 設定ファイルでブレークポイントデバッグを設定するとファイルが見つからないエラーが発生します。この問題を修正するには、.vscode/settings.json に次の設定を追加します。

json

{
  "debug.javascript.terminalOptions": {
    "resolveSourceMapLocations": [
      "${workspaceFolder}/**",
      "!**/node_modules/**",
      "**/node_modules/.vite-temp/**"
    ]
  }
}

Vite の設定 ​

設定のインテリセンス ​

条件付き設定 ​

非同期設定 ​

設定で環境変数を使用する ​

VS Code で設定ファイルをデバッグする ​