Viteの設定

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

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

// vite.config.js
export default {
  // config options
}

Viteは、プロジェクトがネイティブのNode ESMを使用していない場合でも（例えば、package.jsonにtype: "module"がない場合でも）、設定ファイルでESモジュールの構文を使用できることに注意してください。この場合、設定ファイルはロード前に自動的に事前処理されます。

--config CLIオプション（cwdからの相対パスで解決）を使用して、使用する設定ファイルを明示的に指定することもできます。

vite --config my-config.js

設定のインテリセンス

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は、ロードするファイルをVite設定を評価した後にしか決定できないため、デフォルトでは.envファイルをロードしないことに注意してください。たとえば、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),
    },
  }
})