Vite の設定
コマンドラインから vite
を実行すると、Vite はプロジェクトルート内の vite.config.js
という名前の設定ファイルを自動的に解決しようとします(その他の JS および TS の拡張子もサポートされています)。
最も基本的な設定ファイルは次のようになります:
// vite.config.js
export default {
// 設定オプション
}
package.json
に type: "module"
などでプロジェクトがネイティブな Node ESM を使用していない場合でも、Vite は設定ファイルで ES モジュール構文の使用をサポートしています。この場合、設定ファイルはロードの前に自動的に前処理されます。
また、CLI の --config
オプションで、使用するコンフィグファイルを明示的に指定することもできます(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 は TS の設定ファイルも直接サポートしています。vite.config.ts
を defineConfig
ヘルパと一緒に使うこともできます。
条件付き設定
コマンド(dev
/serve
か build
)や使用されているモードや SSR ビルド (ssrBuild
) かどうかに基づいて条件付きで設定のオプションを決定する必要がある場合は、代わりに関数をエクスポートできます:
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// dev 固有の設定
}
} else {
// command === 'build'
return {
// build 固有の設定
}
}
})
Vite の API において command
の値は、開発時(CLI で vite
、vite dev
、vite serve
がエイリアス)には serve
となり、本番用にビルド(vite build
)するときには build
となることに注意してください。
ssrBuild
は実験的です。より普遍的な ssr
フラグの代わりにビルド時のみ利用できるのは、開発時は、SSR のリクエストも SSR でないリクエストも設定を共有する同じサーバにより処理されているためです。ブラウザと SSR ビルドで別々のコマンドがないツールでは、値が undefined
になることがあるため、true
と false
に対する明示的な比較を使用してください。
非同期の設定
設定で非同期の関数を呼び出す必要がある場合は、代わりに非同期関数をエクスポートできます。また、この非同期関数は defineConfig
を通じて渡すことができ、自動補完のサポートを向上させることができます:
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// vite の設定
}
})
環境変数を設定に使用する
通常通り、環境変数は p
から取得することができます。
Vite はデフォルトでは .env
ファイルをロードしないことに注意してください。ロードするファイルは Vite の設定を評価した後に決定されるからです。例えば、 root
と envDir
オプションはロードの動作に影響します。しかし必要に応じて、エクスポートされた loadEnv
ヘルパーを使用して、特定の .env
ファイルをロードすることができます。
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
// `mode` に基づいて現在の作業ディレクトリにある env ファイルをロードする
// `VITE_` プレフィックスに関係なく全ての環境変数をロードするには、第 3 引数に '' を設定します
const env = loadEnv(mode, process.cwd(), '')
return {
// vite の設定
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV),
},
}
})