😀
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ファイルに追加可能です。
例 ：
vite-env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
VITE_TITLE: string;
}
追加後、import.meta.env.使用する際に、追加れた環境変数も表示されるようになる。
おまけ
Discussion