React Vite生产环境无法读取Firebase环境变量求助

DevOps 小满

2026-6-23

解决方案

核心问题分析

你在生产环境无法读取环境变量的根源在于：Vite在生产构建时不会默认提供Node.js的process对象，而你在vite.config.ts中直接通过define把process.env赋值为环境变量对象的写法，无法在浏览器环境中被正确解析；同时代码中使用process.env调用变量的方式不符合Vite的生产环境规范。

修复步骤

1. 调整代码中的环境变量调用方式

将./src/config/firebase.ts里的process.env替换为Vite原生支持的import.meta.env：

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

console.log('VITE VARS', import.meta.env)

const app = initializeApp({
    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_MESSAGE_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
})

export const auth = getAuth(app)
export const firestore = getFirestore(app)

export default app

2. 修正Vite配置文件

移除vite.config.ts中错误的define配置（Vite会自动处理VITE_前缀的变量并注入到import.meta.env），同时简化loadEnv的调用：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import dynamicImport from 'vite-plugin-dynamic-import'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({ mode }) => {
    // 第三个参数默认是'VITE_'，仅加载前缀符合规范的变量
    const env = loadEnv(mode, process.cwd())
    return {
        base: env.VITE_ROUTER_BASE_URL || '/',
        envDir: './',
        plugins: [
            react({
                babel: {
                    plugins: ['babel-plugin-macros'],
                },
            }),
            dynamicImport(),
            tsconfigPaths(),
        ],
        assetsInclude: ['**/*.md'],
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src'),
            },
        },
        build: {
            outDir: 'build',
        },
    }
})

3. 构建与部署验证

本地执行npm run build重新构建项目
若使用CI/CD平台部署，确保平台已配置好对应VITE_前缀的环境变量（或构建时.env文件已被正确包含）
部署后打开生产环境页面，查看控制台输出确认变量已正常加载

补充说明

Vite在开发模式下会模拟process.env方便兼容旧代码，但生产环境下不会提供该对象，必须使用import.meta.env才能保证变量被静态替换为实际值。

若你坚持使用process.env，需在define中逐个映射变量（而非直接赋值整个对象），例如：

define: {
  'process.env.VITE_FIREBASE_API_KEY': JSON.stringify(env.VITE_FIREBASE_API_KEY),
  'process.env.VITE_FIREBASE_AUTH_DOMAIN': JSON.stringify(env.VITE_FIREBASE_AUTH_DOMAIN)
  // 其他变量依次类推
}

但这种方式繁琐且不符合Vite官方推荐规范，不建议使用。

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