vite 環境変数とパターン

環境変数

Vite は特別なオブジェクトの環境変数を公開します import.meta.env 。あらゆる場合に使用できる組み込み変数をいくつか示します。

import.meta.env.MODE: {string}アプリケーションが実行されるモード。
import.meta.env.BASE_URL: {string} アプリケーションをデプロイするときのベース URL。これは、基本構成項目によって決まります。
import.meta.env.PROD: {boolean} アプリケーションが運用環境で実行されているかどうか。
import.meta.env.DEV: {boolean} アプリケーションが開発環境で実行されているかどうか (常にその import.meta.env.PROD逆)。
import.meta.env.SSR: {boolean} アプリケーションがサーバー上で実行されているかどうか。

本番環境のリプレイス

運用環境では、これらの環境変数はビルド時に静的に置き換えられるため、参照する場合は完全に静的な文字列を使用してください。ダイナミックキーは有効になりません。たとえば、動的なキー値は import.meta.env[key] 無効です。

また、JavaScript および Vue テンプレートで発生する文字列も置き換えられます。これは非常にまれですが、偶然に発生した可能性があります。この場合、たとえばに置き換えられると、Missing Semicolon やなどのUnexpected token エラーが表示されることがあります。この問題を回避するには、いくつかの方法があります。"process.env.NODE_ENV"""development": "

JavaScript 文字列の場合、Unicode のゼロ幅スペースを使用して文字列を分割できます (例: 'import.meta\u200b.env.MODE')。
Vue テンプレートまたは JavaScript 文字列にコンパイルされたその他の HTML の場合、 <wbr> タグ(例: import.meta.<wbr>env.MODE)を使用できます。

`.env` 書類

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

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

環境読み込み優先度:

パターンを指定するファイル (例: .env.production) は、一般的な形式 (例 .env: ) より優先されます。

また、Vite の実行時にすでに存在している環境変数が最も優先され、 .env クラスファイルによって上書きされません。たとえば、を実行しているとき VITE_SOME_KEY=123 vite build 。

.env クラスファイルは Vite の起動時にロードされ、変更はサーバーの再起動後に有効になります。

ロードされた環境変数は、 import.meta.env クライアントのソースコードにも文字列として公開されます。

一部の環境変数が誤ってクライアントに漏洩することを防ぐために、接頭辞 _ VITE_ がvite 処理されたコードに公開されます。たとえば、次の環境変数は次のとおりです。

VITE_SOME_KEY=123
DB_PASSWORD=foobar

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

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

さらに、Vite は dotenv-expandを使用して変数を直接展開します。構文の詳細については、ドキュメントを参照してください。

環境変数でシンボルを使用する場合は $ 、次のコマンドを使用し\ てエスケープする必要があることに注意してください。

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

環境変数の接頭辞をカスタマイズする場合は、 envPrefix を参照してください。

安全上のご注意

.env.*.local ファイルはローカルである必要があり、機密変数を含めることができます。 git によってチェックインされないように、.local 自分のものに追加する必要があります。.gitignore
Vite ソースコードに公開される変数は最終的にクライアントパッケージに表示されるため、VITE_* 変数には機密情報が含まれていてはなりません。

TypeScript 用の IntelliSense

デフォルトでは、Vite は vite/client.d.ts に import.meta.env タイプ定義を提供します。.env[mode] ファイル内の環境変数をカスタマイズ VITE_ するにつれて、接頭辞が . の付いたユーザー定義の環境変数に対して TypeScript インテリセンスを取得することが必要になる場合があります。

これを行うには、ディレクトリにファイル src を作成し、次のように定義を追加します。env.d.tsImportMetaEnv

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

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

コードがDOM や WebWorkerなどのブラウザ環境のタイプに依存している場合は、 libtsconfig.jsonフィールドを変更してタイプのサポートを取得できます。

{
  "lib": ["WebWorker"]
}

HTML環境変数の置換

Vite は、HTML ファイル内の環境変数の置換もサポートしています。import.meta.env の属性はすべて、特別な構文%ENV_NAME% を使用して HTML ファイルで使用できます。

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

環境変数 import.meta.env が存在しない場合 (たとえば、 doesn'texistent ) %NON_EXISTENT%、環境変数は無視され、置換されません。これは import.meta.env.NON_EXISTENT 、に置換される JS とは異なります undefined。

モデル

デフォルトでは、開発サーバー (dev コマンド) は development (開発) モードで実行され、 build コマンドは production (運用) モードで実行されます。

これは、実行時に vite build 、 .env.production 以下に存在する可能性のある環境変数を自動的にロードすることを意味します。

# .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

環境変数

本番環境のリプレイス

.env 書類

TypeScript 用の IntelliSense

HTML環境変数の置換

モデル

おすすめ

`.env` 書類