Vue.js Firebase项目多环境配置：部署时切换生产环境配置

我完全懂你现在的需求——想让Vue.js项目在执行firebase use prod && firebase deploy时自动切换到生产环境的Firebase配置，不用每次手动修改配置文件对吧？我之前帮不少开发者处理过类似的场景，给你一步步拆解可行的方案：

1. 整理多环境配置文件结构 #

首先把不同环境的Firebase配置分开存放，避免混在一起：

• 在项目根目录新建firebase-configs文件夹
• 里面分别创建生产和开发环境的配置文件：
  • firebase.config.prod.js（生产环境配置）
  • firebase.config.dev.js（开发环境配置）

每个配置文件的格式如下（替换成你自己的真实配置）：

// firebase.config.prod.js
export default {
  apiKey: "你的生产环境apiKey",
  authDomain: "你的生产环境authDomain",
  projectId: "你的生产环境projectId",
  storageBucket: "你的生产环境storageBucket",
  messagingSenderId: "你的生产环境messagingSenderId",
  appId: "你的生产环境appId"
}

2. 配置Vue环境变量 #

Vue.js支持通过.env文件设置环境变量，我们用它来标记当前运行环境：

• 在项目根目录创建.env.production和.env.development文件：

  # .env.production
  VUE_APP_FIREBASE_ENV=prod
  

  # .env.development
  VUE_APP_FIREBASE_ENV=dev
  

注意：变量名必须以VUE_APP_开头，否则Vue CLI不会把它注入到项目中。另外记得把这些.env文件加入.gitignore，别把敏感配置提交到仓库！

3. 修改主配置文件firebaseConfig.js #

现在让这个文件根据环境变量自动加载对应配置，然后初始化Firebase：

// firebaseConfig.js
import { initializeApp } from "firebase/app";

// 根据环境变量加载对应配置
let firebaseConfig;
const currentEnv = process.env.VUE_APP_FIREBASE_ENV || 'dev';

if (currentEnv === 'prod') {
  firebaseConfig = require('./firebase-configs/firebase.config.prod').default;
} else {
  firebaseConfig = require('./firebase-configs/firebase.config.dev').default;
}

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

// 导出初始化后的实例，供项目其他部分使用
export default firebaseApp;

如果你的项目用的是Vue 3，初始化逻辑和Vue 2基本一致，只是在main.js里引入的方式不变。

4. 配置Firebase部署与构建命令 #

接下来要让Firebase在部署生产环境时，自动触发生产环境的构建：

• 修改package.json里的脚本，添加指定环境的构建命令：

  {
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "build:prod": "vue-cli-service build --mode production",
      "build:dev": "vue-cli-service build --mode development"
    }
  }
  

• 然后修改firebase.json的hosting配置，指定生产环境部署前的预构建命令：

  {
    "hosting": {
      "public": "dist",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "predeploy": [
        "npm run build:prod"
      ]
    }
  }
  

5. 测试部署流程 #

现在执行你原来的命令：

firebase use prod && firebase deploy

Firebase会先运行predeploy里的npm run build:prod，这个命令会加载.env.production的变量，让firebaseConfig.js自动导入生产环境的配置，构建完成后再部署到你的生产环境别名对应的Firebase项目。

如果是开发环境，直接运行npm run serve就会自动加载.env.development的配置，用开发环境的Firebase实例。

可选优化：动态导入配置 #

如果你觉得if-else判断不够简洁，可以用动态导入的方式（注意异步逻辑）：

// firebaseConfig.js
import { initializeApp } from "firebase/app";

const currentEnv = process.env.VUE_APP_FIREBASE_ENV || 'dev';

// 动态导入对应环境的配置
export default import(`./firebase-configs/firebase.config.${currentEnv}.js`)
  .then(module => initializeApp(module.default));

这种方式需要在main.js里等待Firebase初始化完成后再挂载Vue实例，比如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import firebaseApp from './firebaseConfig.js'

firebaseApp.then(app => {
  createApp(App).mount('#app')
})

内容的提问来源于stack exchange，提问作者Alan Richards