env変数とモード

Viteは、特別なimport.meta.envオブジェクトの下に特定の定数を公開します。これらの定数は、開発中のグローバル変数として定義され、ビルド時に静的に置き換えて、ツリーを効果的にします。

組み込み定数

すべての場合に組み込みの定数がいくつかあります。

• import.meta.env.MODE :{string}アプリが実行されているモード。

• import.meta.env.BASE_URL :{string}ベースURLアプリが提供されています。これは、 base configオプションによって決定されます。

• import.meta.env.PROD :{boolean}アプリが生産で実行されているかどうか（ NODE_ENV='production'で開発者サーバーを実行するか、 NODE_ENV='production'で構築されたアプリを実行します）。

• import.meta.env.DEV :{boolean}アプリが開発中に実行されているかどうか（常にimport.meta.env.PRODの反対）

• import.meta.env.SSR :{boolean}アプリがサーバーで実行されているかどうか。

env変数

Viteは、文字列として自動的に文字列としてENV変数をimport.meta.envオブジェクトの下に公開します。

誤ってENV変数がクライアントに漏れているのを防ぐために、 VITE_が付けられた変数のみがVite-Processedコードに公開されます。例:次のenv変数について:

.env

VITE_SOME_KEY=123
DB_PASSWORD=foobar

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

console.log(import.meta.env.VITE_SOME_KEY) // 「123」
console.log(import.meta.env.DB_PASSWORD) // 未定義

ENV変数のプレフィックスをカスタマイズする場合は、 Envprefixオプションを参照してください。

Env parsing

上記のように、 VITE_SOME_KEYは数字ですが、解析すると文字列を返します。 Boolean Env変数についても同じことが起こります。コードで使用するときは、必ず目的のタイプに変換してください。

.envファイル

Viteはdotenvを使用して、環境ディレクトリ内の次のファイルから追加の環境変数をロードします。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Env Loading Priorities

特定のモードのENVファイル（ .env.production ）は、一般的なモード（例えば.env ）よりも優先度が高くなります。

Viteは、モード固有の.env.[mode]ファイルに加えて、常に.envと.env.localロードします。モード固有のファイルで宣言された変数は、汎用ファイルのファイルよりも優先されますが、 .envまたは.env.localでのみ定義されている変数は環境で利用可能です。

さらに、Viteが実行されたときに既に存在する環境変数は最優先事項であり、 .envファイルによって上書きされません。たとえば、実行する場合VITE_SOME_KEY=123 vite build 。

.envファイルはViteの開始時にロードされます。変更を行った後にサーバーを再起動します。

また、Viteはdotenv-Expandを使用して、envファイルで記述された変数を箱から出して拡張します。構文の詳細については、ドキュメントをご覧ください。

環境値内で$使用する場合は、 \で逃げる必要があることに注意してください。

.env

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

SECURITY NOTES

• .env.*.localファイルはローカルのみであり、機密変数を含めることができます。 Gitにチェックされないように、 .gitignoreに*.local追加する必要があります。

• Viteソースコードに公開された変数は、クライアントバンドルに終わるため、 VITE_*変数には機密情報が含まれてはなりません。

Expanding variables in reverse order

Viteは、変数の拡大を逆順序でサポートします。 たとえば、以下の.env VITE_FOO=foobarとして評価されますVITE_BAR=bar

.env

VITE_FOO=foo${VITE_BAR}
VITE_BAR=bar

これは、シェルスクリプトやdocker-composeのような他のツールでは機能しません。 とはいえ、Viteはこの動作をサポートしています。これは長い間dotenv-expandでサポートされており、JavaScriptエコシステムの他のツールはこの動作をサポートする古いバージョンを使用します。

相互作用の問題を回避するには、この動作に依存しないようにすることをお勧めします。 Viteは、将来この動作に対する警告を発し始める可能性があります。

TypeScriptのIntellisense

デフォルトでは、Viteは1 in vite/client.d.tsのimport.meta.envのタイプ定義を提供します。 .env.[mode]ファイルでより多くのカスタムENV変数を定義できますが、 VITE_でプレフィックスされたユーザー定義のENV変数のTypeScript Intellisenseを取得することをお勧めします。

これを達成するために、 srcディレクトリvite-env.d.tsを作成してから、次のようにImportMetaEnv拡張できます。

vite-env.d.ts

///<reference types="vite/client">

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // より多くのenv変数...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

コードがDOMやWebWorkerなどのブラウザ環境のタイプに依存している場合、 LIBフィールドをtsconfig.jsonに更新できます。

tsconfig.json

{
  "lib": ["WebWorker"]
}

Imports will break type augmentation

ImportMetaEnv増強が機能しない場合は、 vite-env.d.tsにimportステートメントがないことを確認してください。詳細については、 TypeScriptドキュメントを参照してください。

HTML定数交換

Viteは、HTMLファイルの定数の交換もサポートしています。 import.meta.envのプロパティは、特別な%CONST_NAME%構文を持つHTMLファイルで使用できます。

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

ENVがimport.meta.env 、例えば%NON_EXISTENT%に存在しない場合、それはundefinedと交換されるJSのimport.meta.env.NON_EXISTENTとは異なり、無視され、交換されません。

Viteは多くのフレームワークで使用されていることを考えると、条件のような複雑な交換について意図的には感染していません。 Viteは、既存のユーザーランドプラグインまたはtransformIndexHtmlフックを実装するカスタムプラグインを使用して拡張できます。

モード

デフォルトでは、DEVサーバー（ devコマンド）はdevelopmentモードで実行され、 buildコマンドはproductionモードで実行されます。

これは、 vite build実行するときに、1つがある場合は.env.productionからENV変数をロードすることを意味します。

.env.production

VITE_APP_TITLE=My App

アプリでは、 import.meta.env.VITE_APP_TITLEを使用してタイトルをレンダリングできます。

場合によっては、別のモードでvite build実行して別のタイトルをレンダリングすることをお勧めします。 --modeオプションフラグを渡すことにより、コマンドに使用されるデフォルトモードを上書きできます。たとえば、ステージングモード用にアプリを構築する場合:

vite build --mode staging

.env.stagingファイルを作成します。

.env.staging

VITE_APP_TITLE=My App (staging)

vite buildデフォルトで制作ビルドを実行すると、これを変更して、別のモードと.envファイル構成を使用して開発ビルドを実行することもできます。

.env.testing

NODE_ENV=development

node_envおよびモード

NODE_ENV （ process.env.NODE_ENV ）とモードは2つの異なる概念であることに注意することが重要です。異なるコマンドがNODE_ENVとモードにどのように影響するかは次のとおりです。

指示	node_env	モード
vite build	"production"	"production"
vite build --mode development	"production"	"development"
NODE_ENV=development vite build	"development"	"production"
NODE_ENV=development vite build --mode development	"development"	"development"

NODE_ENVとモードの異なる値は、対応するimport.meta.envプロパティについても反映しています。

指示	import.meta.env.PROD	import.meta.env.DEV
NODE_ENV=production	true	false
NODE_ENV=development	false	true
NODE_ENV=other	false	true

指示	import.meta.env.MODE
--mode production	"production"
--mode development	"development"
--mode staging	"staging"

NODE_ENV in .env files

NODE_ENV=...コマンドで、また.envファイルで設定できます。 NODE_ENV .env.[mode]ファイルで指定されている場合、モードを使用してその値を制御できます。ただし、 NODE_ENVとモードの両方が2つの異なる概念として残ります。

コマンドにNODE_ENV=...の主な利点は、Viteが値を早期に検出できることです。また、vite構成でprocess.env.NODE_ENV読み取ることができます。viteは、構成が評価された後にのみENVファイルを読み込むことができるためです。