vite の config ファイルで環境変数を使いたい

Vue CLI では config ファイル内で env ファイルに定義した環境変数にアクセスできましたが、Vite では config ファイル内では環境変数にアクセスできません。

ただ、vite.config.(js|ts)ファイル内で環境変数を使いたいシーンは結構あると思います。

なぜアクセスできないのか？

vite では config ファイル内でenvDirやmodeなどが設定できます。そしてそれらの値が決まらないとどの env ファイルを使えばいいか決まりません。
なので、config ファイルを評価してからでないと環境変数を読み込めないのです。

ではどうするか？

まず、必要な環境変数がcommand（dev/serve か build）かmodeだけなら config ファイルの記述を以下の様にすることで使用可能です。

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  // 設定
});

それ以外の env ファイル内に独自に設定した環境変数が必要な場合はloadEnv関数が使えます。

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ command, mode }) => {
  const env = { ...loadEnv(mode, process.cwd()) };
  // 設定
});

1 つの引数は読み込みたい env の mode、2 つ目の因数は env ファイルのある dir を指定できます（参考）。

上記はコマンド実行時の mode でルートディレクトリの config ファイルを読んでくれます。

書いてませんが 3 つ目の引数もあってそこは取得したい環境変数の prefix を指定できます。デフォルトで'VITE_'なので'VITE_'から始まる環境変数をとってきます。
第 3 引数に''を指定すると'VITE_'以外からはじまるものを含めて全ての環境変数を取得できます。