Viteで本番と開発環境で変数を変えたい

本番と開発環境で叩くAPIのURIを変えたいなぁ

そういうときってあるよね。.envでなんとかするんだったけど、どうするんだっけな〜と毎回ググることになるのでここにメモ。

手順

1. .env.devと.env.productionファイルを用意する
2. 変数をVITE_API_URL=https://*****/**/apiとする
3. 使いたいところでexport const API_URL = import.meta.env.VITE_API_URL;とする
4. devとbuildのときに変数を渡す

.env.devと.env.productionファイルを用意する
変数を定義する

.env.dev

VITE_API_URL=https://dev-server***.jp/api

.env.production

VITE_API_URL=https://prod-server***.jp/api

注)VITE_という名前をつけておかないとvite側で.envの変数を認識してくれないようです。
参考：https://ja.vitejs.dev/guide/env-and-mode.html#env-files
→よく読んだら違った

環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下のファイルで:

VITE_SOME_KEY=123
DB_PASSWORD=foobar

VITE_SOME_KEY だけが import.meta.env.VITE_SOME_KEY としてクライアントソースコードに公開され、DB_PASSWORD は公開されません。

apiConfig.ts

export const API_URL = import.meta.env.VITE_API_URL;

そしてdevとbuildのところで環境変数を与えてあげましょ

package.json

    "dev": "vite --host --mode dev",
    "build": "tsc && vite build --mode production"

補足：productionのときだけ通りたいif文とか

if.ts

if (import.meta.env.PROD) {
  console.log('Production!');
  return;
};

※ちなみにdevのときはimport.meta.env.DEV

当たり前といえば当たり前の環境変数。ちょっと面倒くさいけど、最初にこれをやっておくと効率変わると思いますよ。うん。