vite をパッケージ化するときに、.env を介してさまざまなモードでさまざまな環境変数データを渡します。

まず、次のことを知っておく必要があります。

1. 「import.meta.env.特定の変数名」を介して.env ファイル内の環境変数にアクセスします。

正しい方法: import.meta.env.VITE_APP_TITLE
間違った方法: import.meta.env[key]

2. .env ファイル内の環境変数にはVITE_ というプレフィックスを付ける必要があります。そうしないと、正常に参照できません。

正しい方法: VITE_APP_TITLE = 'vite'
間違った方法: TE_WORD = 123

3. .env で始まるファイルの種類が異なると、次のような異なる環境変数がロードされます。

• .env はすべての場合にロードされます

• .env,local はどの場合でもロードされますが、git では無視されます

• .env.[mode] は対応するモードでのみロードされます

• .env.[mode].local は対応するモードでのみロードされますが、git によって無視されます。

パッケージ化プロセス中にさまざまなモードに従ってさまざまな環境変数値を取得するには、--mode オプション フラグを使用して、コマンドで使用されるデフォルト モードをオーバーライドする必要があります。たとえば、開発環境/テスト環境/運用環境はすべて対応します。さまざまなタイトルに:

1. まず、3 つの環境変数に対応する 3 つの .env ファイルをプロジェクトのルート ディレクトリに作成します。

.env.開発 下：

# 开发环境配置
VITE_APP_TITLE = '开发标题'

.env.test の下:

# 测试环境配置
VITE_APP_TITLE = '测试标题'

.env.staging の下:

# 生产环境配置
VITE_APP_TITLE = '生产标题'

2. package.json ファイル内のスクリプトに --mode オプション フラグを渡して、コマンドで使用されるデフォルト モードをオーバーライドします。

{
"scripts": {
    "dev": "vite",
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging",    //对应生产标题
    "build:test": "vite build --mode test",        //对应测试标题
    "build:dev": "vite build --mode development",  //对应开发标题
    "preview": "vite preview"
  },
}

3. 使用：

const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)

参考までに、vite の公式 Web サイトの紹介を添付します。