Vue-cli项目执行npm run build时切换Firebase Database的正确方法

这是前端项目里非常常见的环境配置需求，结合Vue-cli + Webpack的生态，我给你推荐几个靠谱的实现方式，都是在实际项目中验证过的：

方法一：利用Vue-cli自带的环境变量（最推荐） #

Vue-cli 3+已经内置了环境变量的支持，你只需要在项目根目录创建两个环境配置文件：

• .env.development：开发环境配置
• .env.production：生产环境配置

文件内容格式如下（注意变量必须以VUE_APP_开头，否则会被Webpack忽略）：

# .env.development
VUE_APP_FIREBASE_API_KEY="你的开发环境API_KEY"
VUE_APP_FIREBASE_AUTH_DOMAIN="你的开发环境AUTH_DOMAIN"
VUE_APP_FIREBASE_DATABASE_URL="你的开发环境DATABASE_URL"
# 其他Firebase配置项...

# .env.production
VUE_APP_FIREBASE_API_KEY="你的生产环境API_KEY"
VUE_APP_FIREBASE_AUTH_DOMAIN="你的生产环境AUTH_DOMAIN"
VUE_APP_FIREBASE_DATABASE_URL="你的生产环境DATABASE_URL"
# 其他Firebase配置项...

然后在main.js里直接通过process.env读取这些变量来初始化Firebase：

import firebase from 'firebase/app'
import 'firebase/database'

const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
}

firebase.initializeApp(firebaseConfig)

这样执行npm run serve时会自动加载.env.development，执行npm run build时会自动加载.env.production，完全不用手动切换。

⚠️ 注意：记得把.env.production加入.gitignore，不要把生产环境的敏感配置提交到代码仓库！如果用CI/CD工具部署，可以在平台上设置环境变量来替代本地文件。

方法二：通过配置文件区分环境 #

如果不想用环境变量文件，你可以单独写一个配置文件来判断当前环境：

在src/config目录下创建firebase.js：

let firebaseConfig

// 根据Webpack注入的NODE_ENV判断环境
if (process.env.NODE_ENV === 'production') {
  firebaseConfig = {
    // 生产环境的Firebase配置
    apiKey: '生产API_KEY',
    databaseURL: '生产数据库地址',
    // ...其他配置
  }
} else {
  firebaseConfig = {
    // 开发环境的Firebase配置
    apiKey: '开发API_KEY',
    databaseURL: '开发数据库地址',
    // ...其他配置
  }
}

export default firebaseConfig

然后在main.js里导入这个配置：

import firebase from 'firebase/app'
import 'firebase/database'
import firebaseConfig from './config/firebase'

firebase.initializeApp(firebaseConfig)

这种方式的好处是所有配置都集中在一个文件里，一目了然，适合配置项不多的场景。

方法三：修改Webpack配置注入全局变量（进阶） #

如果你需要更灵活的控制，可以通过修改Webpack的DefinePlugin来注入全局配置：

在项目根目录创建vue.config.js（如果没有的话），添加以下配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // 注入Firebase配置，根据环境切换
        'FIREBASE_CONFIG': JSON.stringify(
          process.env.NODE_ENV === 'production'
            ? {
                // 生产配置
                apiKey: '生产API_KEY',
                databaseURL: '生产数据库地址'
                // ...其他配置
              }
            : {
                // 开发配置
                apiKey: '开发API_KEY',
                databaseURL: '开发数据库地址'
                // ...其他配置
              }
        )
      })
    ]
  }
}

然后在main.js里直接使用全局变量FIREBASE_CONFIG：

import firebase from 'firebase/app'
import 'firebase/database'

firebase.initializeApp(FIREBASE_CONFIG)

这种方式适合需要在多个地方复用配置，或者有复杂环境判断逻辑的场景。

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