VUEプロジェクトで環境変数を管理する方法

環境変数管理はVUEプロジェクトで重要であり、ビルドツールに基づいて正しい方法を選択する必要があります。 1. Vue CLIプロジェクトは、.env.productionなどのprocess.env.vue_appを介してアクセスされるVUE_APP_プレフィックスを備えた.ENVファイルを使用します。 2。Viteプロジェクトは、.env.Stagingなどのimport.meta.env.vite_を介してアクセスされるVite_プレフィックスを使用します。 3.両方とも、対応するファイルをロードするためにカスタムモードをサポートし、.env.localクラスファイルを.gitignoreに追加する必要があります。 4.フロントエンドに機密情報を公開することを避け、参照のために.env.exampleを提供し、実行時に必要な変数を確認してください。変数は、静的に構築されると注入されます。動的構成が必要な場合は、ランタイムロードスキームを使用します。

VUEプロジェクトの環境変数の管理は、開発、テスト、および生産環境全体でさまざまな構成を処理するために不可欠です。特に、APIエンドポイント、機能フラグ、またはサードパーティのサービスキーの場合。セットアップ（Vue CLIまたはVite）に応じて適切に行う方法は次のとおりです。これは、2つの最も一般的なVUE足場ツールです。

1。VueCLIで.envファイルを使用します

Vue CLIを使用している場合、 .envファイルを介して環境変数をサポートします。これらのファイルは、ビルドおよびサービスプロセス中に自動的にロードされます。

サポートされている.envファイルタイプ：

• .env - すべての場合にロードされます
• .env.local - すべての場合にロードされますが、 gitで無視されます（秘密に使用）
• .env.[mode] - 指定されたモードでのみロードされます（例： .env.production ）
• .env.[mode].local - 上記と同じですが、gitで無視されます

ファイルの例：

 ＃.env.development
vue_app_api_url = https：//api.dev.example.com
vue_app_debug = true

＃.env.Production
vue_app_api_url = https：//api.example.com
vue_app_debug = false

従うべきルール：

• VUE_APP_が付いた変数のみがクライアントバンドルに埋め込まれます。
• コードでprocess.env.VUE_APP_YOUR_VARを介してアクセスします。

 // VUEコンポーネントまたはJSファイル
console.log（process.env.vue_app_api_url）;

BROWSERで終了する環境変数に、機密データ（APIシークレットなど）を決して保存しないでください。それらはJSバンドルに埋め込まれており、誰にでも表示されます。

2。ViteベースのVUEプロジェクトの環境変数

Viteを使用している場合（ create-vueまたはvite initで作成されたVUE 3プロジェクトで一般）、ハンドリングはわずかに異なります。

vite .envファイルルール：

• バイアブルには、クライアントコードにさらされるには、 VITE_が付いている必要があります。
• ファイル： .env 、 .env.local 、 .env.[mode] （eg、 .env.production ）

例：

 ＃.env.development
vite_api_url = https：//api.dev.example.com
vite_app_name = my app dev

＃.env.Production
vite_api_url = https：//api.example.com
vite_app_name =私のアプリ

コードへのアクセス：

 console.log（import.meta.env.vite_api_url）;
console.log（import.meta.env.vite_app_name）;

？ Viteは、 process.envの代わりにimport.meta.env使用します。

3.さまざまなモードとカスタム環境を使用します

Vue CLIとViteの両方がカスタムモードをサポートしています。

Vue CLI：

 ＃カスタムモードを使用します
Vue-Cli-Service Serv  - モードステージング

ロード.env.staging 。

招待する：

 ＃package.jsonスクリプト
「スクリプト」：{
  「サーブ：ステージング」：「Vite  - モードステージング」
}

次に、 vite.config.jsを作成してモードを定義し、適切な.envファイルをロードします。

デフォルトをエクスポート（{mode}）=> {
  process.env = {... process.env、... loadenv（mode、process.cwd（））};
  戻る {
    // config
  };
};

4。ベストプラクティス

• 秘密を決してコミットしないでください.gitignore .env.local and .env.*.local
• 例を提供します：プレースホルダーの値でリポジトリに.env.exampleを含めます。

   ＃.env.example
  vue_app_api_url = your_dev_api_url
  vite_api_url = your_dev_api_url

• 必要な変数を検証します：重要な変数が定義されている場合は実行時に確認します。
• ビルド時にそれらを使用します。環境変数は静的です - ランタイムではなくビルド時にセットします。ランタイム構成が必要な場合は、ロード時に取得した構成ファイルを検討してください。

---

まとめ

道具	プレフィックス	アクセス経由	ファイルの例
Vue Cli	VUE_APP_	process.env.VUE_APP_*	.env.production
vite	VITE_	import.meta.env.VITE_*	.env.staging

ビルドツールに基づいて適切なパターンを選択し、フロントエンドから秘密を守り、モードを使用して環境を分離します。

基本的に、ファイルに正しく名前を付け、右のプレフィックスを使用して、図のようにコードにアクセスするだけです。追加のライブラリは必要ありません。

以上がVUEプロジェクトで環境変数を管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。