如何在Firebase Hosting中用环境变量区分开发生产环境配置？

核心思路 #

通过构建工具注入环境变量，结合npm脚本封装部署命令，实现执行不同命令时自动加载对应环境的Firebase配置，彻底告别手动注释切换的麻烦。

具体实现步骤 #

1. 创建环境配置文件 #

在项目根目录分别创建开发和生产环境的配置文件，命名规则需符合你使用的构建工具要求（比如Vite用VITE_前缀，Vue CLI用VUE_APP_前缀）：

• .env.dev（开发环境）：

VITE_FIREBASE_API_KEY=你的dev环境apiKey
VITE_FIREBASE_AUTH_DOMAIN=你的dev环境authDomain
VITE_FIREBASE_PROJECT_ID=你的dev环境projectId
VITE_FIREBASE_STORAGE_BUCKET=你的dev环境storageBucket
VITE_FIREBASE_MESSAGING_SENDER_ID=你的dev环境messagingSenderId
VITE_FIREBASE_APP_ID=你的dev环境appId

• .env.prod（生产环境）：

VITE_FIREBASE_API_KEY=你的prod环境apiKey
VITE_FIREBASE_AUTH_DOMAIN=你的prod环境authDomain
VITE_FIREBASE_PROJECT_ID=你的prod环境projectId
VITE_FIREBASE_STORAGE_BUCKET=你的prod环境storageBucket
VITE_FIREBASE_MESSAGING_SENDER_ID=你的prod环境messagingSenderId
VITE_FIREBASE_APP_ID=你的prod环境appId

注意：把.env.*加入.gitignore，避免敏感配置提交到代码仓库。

2. 代码中通过环境变量初始化Firebase #

修改Firebase初始化代码，直接读取环境变量填充配置：

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);

如果你用的是Vue CLI，把import.meta.env换成process.env即可。

3. 封装部署脚本 #

在package.json的scripts字段中添加两个部署命令，分别对应开发和生产环境：

{
  "scripts": {
    "deploy:dev": "firebase use dev && vite build --mode dev && firebase deploy --hosting",
    "deploy:prod": "firebase use prod && vite build --mode prod && firebase deploy --hosting"
  }
}

4. 一键部署对应环境 #

• 部署开发环境：执行npm run deploy:dev，命令会自动切换到dev Firebase项目、构建dev环境代码、部署到hosting。
• 部署生产环境：执行npm run deploy:prod，同理自动完成切换、构建、部署流程。

无构建工具的静态项目方案 #

如果你的项目是纯静态HTML/JS，没有构建工具，可以用bash脚本结合环境变量替换代码：

1. 在代码中预留配置占位符：

const firebaseConfig = {
  apiKey: "{{FIREBASE_API_KEY}}",
  authDomain: "{{FIREBASE_AUTH_DOMAIN}}",
  // 其他配置项
};

2. 创建部署脚本deploy-dev.sh：

#!/bin/bash
export FIREBASE_API_KEY="你的dev apiKey"
export FIREBASE_AUTH_DOMAIN="你的dev authDomain"
# 导出其他配置项

# 替换代码中的占位符
sed -i '' "s/{{FIREBASE_API_KEY}}/$FIREBASE_API_KEY/g" ./app.js
sed -i '' "s/{{FIREBASE_AUTH_DOMAIN}}/$FIREBASE_AUTH_DOMAIN/g" ./app.js

# 切换项目并部署
firebase use dev
firebase deploy --hosting

同理创建deploy-prod.sh，替换为prod配置即可。

内容的提问来源于stack exchange，提问作者Simon Rubin