Vue3 + Firebase：为每种构建类型使用不同的 .ENV 文件

Question

我已经实施了两个 Firebase 项目；生产（默认）和登台

在我的 Vue3 项目中..我有以下环境文件：

.env.local、.env.Production 和 .env.staging

npm run dev //uses .env-local. works fine

firebase deploy -P default //uses .env-production. works fine

但是..运行：

firebase deploy -P staging //uses .env-production. !!!WRONG!!!

示例.env：

VITE_ENV = "development"
VITE_FIREBASE_API_KEY = "sdasdasdsada"
VITE_FIREBASE_AUTH_DOMAIN = "sadadasdasd.firebaseapp.com"
VITE_FIREBASE_PROJECT_ID = "sadasdasd"
VITE_FIREBASE_STORAGE_BUCKET = "asdasdas"
...

问题：

如何让

firebase deploy -P staging

使用 .env.staging 环境？

Answer 1

您可以考虑在

package.json

中添加用于暂存部署的新脚本：该脚本将在部署到 Firebase 之前设置适当的 环境变量。

"scripts": {
    "deploy:staging": "cross-env VITE_ENV=staging vite build && firebase deploy -P staging"
}

cross-env

(

npm install --save-dev cross-env

) 用于以与平台无关的方式设置环境变量。作为一个项目，它处于维护模式，但仍然运行良好。

您的

package.json

现在应该包含新的部署脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "deploy:staging": "cross-env VITE_ENV=staging vite build && firebase deploy -P staging"
    // other scripts
  }
  // rest of your package.json
}

然后，确保您的

vite.config.js

（或等效的配置文件）基于

VITE_ENV

正确加载环境变量。

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
    process.env = {...process.env, ...require(`./.env.${mode}`)};
    // your vite config
});

现在，当您想要部署到临时环境时，您可以使用新的 npm 脚本：

npm run deploy:staging

这应该确保每种部署类型使用正确的环境变量。

[ Vue3 App ] -- .env.staging -------------------- [ Vite Build ]
   |                                                    |
   |----------- .env.production -- [ Vite Build ]       |
                                                   (build artifacts)
                                                        |
                                                  [ Firebase Deploy ]
                                                        |-P staging
                                                        |-P default

确保

.env

文件正确命名（

.env.local

、

.env.production

、

.env.staging

）并包含各自的环境特定变量。