如何为iOS/Android的Capacitor/Ionic React应用搭建Firebase开发与生产环境？

1. 准备多环境配置文件 #

在项目根目录创建三个环境变量文件，分别对应开发、预发布、生产环境：

• .env.dev
• .env.staging
• .env.prod

每个文件写入对应环境的 Firebase 配置参数，示例如下：

# .env.dev 开发环境配置
REACT_APP_FIREBASE_API_KEY=你的开发环境API密钥
REACT_APP_FIREBASE_AUTH_DOMAIN=你的开发环境认证域名
REACT_APP_FIREBASE_PROJECT_ID=你的开发环境项目ID
REACT_APP_FIREBASE_STORAGE_BUCKET=你的开发环境存储桶地址
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=你的开发环境消息发送ID
REACT_APP_FIREBASE_APP_ID=你的开发环境应用ID

2. 安装环境变量加载工具 #

安装 env-cmd 用于快速加载指定环境的配置：

npm install env-cmd --save-dev

3. 封装 Firebase 初始化逻辑 #

在 src/firebase.ts 中编写初始化代码，通过环境变量读取对应配置：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// 按需导入你需要的 Firebase 服务

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

// 初始化 Firebase 应用
const app = initializeApp(firebaseConfig);

// 导出初始化后的服务实例，供项目其他模块调用
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

4. 配置启动与构建脚本 #

修改 package.json 中的 scripts 字段，添加对应环境的启动和打包命令：

"scripts": {
  "start:dev": "env-cmd -f .env.dev ionic serve",
  "start:staging": "env-cmd -f .env.staging ionic serve",
  "build:dev": "env-cmd -f .env.dev ionic build",
  "build:staging": "env-cmd -f .env.staging ionic build",
  "build:prod": "env-cmd -f .env.prod ionic build --prod"
}

5. 运行与构建项目 #

• 启动开发环境：npm run start:dev
• 启动预发布环境：npm run start:staging
• 打包开发环境代码：npm run build:dev
• 打包预发布环境代码：npm run build:staging
• 打包生产环境代码：npm run build:prod

内容的提问来源于stack exchange，提问作者cg3.5