【Vite環境変数】import.meta.envとloadEnvの使い方と違い

序文

プロジェクトに取り組む際には、さまざまな設定情報（アプリケーションのタイトル、API アドレスなど）が必要ですが、これらの情報は環境（開発環境、本番環境など）によって異なります。

開発環境や本番環境を変更するたびに、ソースコード内の関連する設定を変更する必要がある場合、アプリケーションの保守性が非常に低くなります。したがって、環境変数を通じてこれらの構成情報を管理できます。

したがって、環境変数の定義は次のようになります。現在のコード環境に応じて値を変更する変数は、環境変数と呼ばれます。

Vite プロジェクトでは、環境変数を使用することで、さまざまな環境でアプリケーションの動作をカスタマイズする方法が提供されます。環境変数を読み取ることで、さまざまな構成情報を設定できます。

開発における一般的なシナリオには次のものがあります。

環境変数を使用すると、現在のアプリケーションが開発環境で実行されているか実稼働環境で実行されているかを簡単に区別できます。たとえば、開発環境ではコンソールのログ記録とデバッグツールを有効にできますが、運用環境ではパフォーマンスとセキュリティを向上させるためにこれらの機能をオフにする必要があります。

アプリケーションは HTTP リクエストを通じてバックエンド API と通信します。API サーバーのアドレスは、開発環境と本番環境で異なる場合があります。環境変数を使用すると、アプリケーションコードから API アドレスを抽出でき、環境ごとに異なるアドレスを指定できます。

API アドレスに加えて、アプリケーションには、アプリケーションのタイトル、テーマの色、バージョン番号など、他の多くの構成情報があります。これらの情報は環境変数を使用して管理できるため、アプリケーションコードのハードコーディングが回避され、コードの保守性と拡張性が向上します。

開発時はデバッグモードを有効にし、運用環境ではコンソール出力を無効にするなど。さらに、環境変数は、現在の環境に応じて異なる API アドレスや CDN パスなどを選択するなど、リソースの場所に使用することもできます。

1..envファイル内

VITE_APP_TITLE=Hello Vite!

2. コード内で、環境変数をimport.meta.env直接

// main.js
console.log(import.meta.env.VITE_APP_TITLE); // 输出：Hello Vite!

1. コードでは、Vite が提供する環境変数モジュールをインポートする必要があります

// main.js
import.meta.env.DEV && require('dotenv').config(); // 在开发环境下自动加载 .env 文件
import { loadEnv } from 'vite';
loadEnv();

2.loadEnvメソッドを環境変数を読み取る

// main.js
console.log(process.env.VITE_APP_TITLE); // 输出：Hello Vite!

import.meta.envこれは、実行時に環境変数の値を取得するためのもので、アプリケーションコード内で環境変数を動的に取得する必要がある場合に適しています。(構成ファイルはビルド時に読み取られるため、構成ファイルからは取得できません!!!)

loadEnvまた、ビルド時に環境変数をロードします。これは、パッケージ化 (ビルド時) 中に環境変数を参照する必要がある場合に適しています。

上で述べたように、Vite ではすべての環境変数VITE_がで始まる。環境変数の値を使用import.meta.envまたは、このルールに従う必要があります。loadEnv

ただし、で始まらない変数も取得できますVITE_が、設定ファイル内の設定を変更する必要がありますprefixes (非推奨)。

loadEnv 関数は、VITE_3 番目のパラメータを変更することで、接頭辞のない変数を取得できます。

function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

上記の 3 番目のパラメータは、デフォルトではプレフィックスですVITE_が、空の文字列 '' に変更できます。