Viteの中で環境変数の使用

Viteプロジェクトの環境変数はmeta属性のenvにある

import.meta.env

Viteにデフォルト存在する環境変数は下記四つが存在する

MODE

環境区別用、production環境、 development環境がある その他の環境を追加する場合.env.`

BASE_URL

ベースドメイン、ローカルでは"/"になる

PROD

真偽値 false | true、PROD環境であるか

DEV

真偽値 false | true、DEV環境であるか

SSR

真偽値 false | true、SSR使用してるか

バンドル後import.meta.envというオブジェクトは存在しない

下記のコードを開発環境に書いても、バンドル後のファイル内ではproductionという文字列になる

console.log(import.meta.env.MODE)

.envファイルの扱い

.envに環境変数定義する際に、プレフィックスとしてVITE_を足す必要があります

VITE_TITLE=vite

定義された環境変すはimport.meta.env.VITE_TITLEで取得可能。

.env.developmentと.env.productionで定義された環境変数は各所属する環境でしか確認できません。

.env.testというファイルの変数を使用する際に、"vite --mode test"で開発サーバー起動する必要がある。

環境変数のタイプ追加

vite-env.d.tsファイルに追加可能です。
例 ：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  VITE_TITLE: string;
}

追加後、import.meta.env.使用する際に、追加れた環境変数も表示されるようになる。

おまけ

https://zenn.dev/pyhrinezumi/books/693ddc2f58a985