環境変数とパターン

環境変数

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

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

本番環境のリプレース

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

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

JavaScript 文字列の場合は、Unicode の幅ゼロのスペースを使用して文字列を分割できます。たとえば、次のようになります'import.meta\u200b.env.MODE'。

Vue テンプレートまたは JavaScript 文字列にコンパイルされたその他の HTML の場合、タグを使用できます (例: import.meta.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_KEY 提供给客户端源码，而 DB_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 によってチェックインされないようにするために、.gitignore に .local を追加する必要があります。

Vite ソースコードに公開される変数は最終的にクライアントパッケージに表示されるため、VITE_* 変数には機密情報を含めないでください。

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

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

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

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

interface ImportMeta {
    
    
  readonly env: ImportMetaEnv
}

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

{
    
    
  "lib": ["WebWorker"]
}

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

これは、vite ビルドが実行されると、.env.production に存在する可能性のある環境変数が自動的に読み込まれることを意味します。

.env.production

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

場合によっては、vite build を別のモードで実行してさまざまなタイトルをレンダリングしたい場合、 --mode オプションフラグを渡すことで、コマンドで使用されるデフォルトモードをオーバーライドできます。たとえば、アプリをステージング (プレリリース) モードでビルドする場合は、次のようにします。

bash
vite build --mode staging では、
新しい .env.staging ファイルを作成する必要もあります。

.env.ステージング

VITE_APP_TITLE=マイアプリ (ステージング)
vite ビルドはデフォルトで実稼働モードビルドを実行するため、別のモードと対応する .env ファイル構成を使用して開発モードビルドを実行するように変更することもできます。

.env.testing

NODE_ENV=開発

Vite 環境変数