React+Vite集成Firebase时出现process未定义错误求助

问题原因 #

Vite 不支持 Create React App（CRA）中的process.env环境变量注入方式，它使用import.meta.env来访问环境变量，且默认要求环境变量以VITE_为前缀。你当前的代码沿用了CRA的写法，导致浏览器无法识别process对象。

解决方案 #

1. 修改环境变量前缀 #

将你的.env文件中所有变量的前缀从REACT_APP_改为VITE_，例如：

VITE_FIREBASE_API_KEY=你的密钥
VITE_FIREBASE_AUTH_DOMAIN=你的认证域名
VITE_FIREBASE_PROJECT_ID=你的项目ID
VITE_FIREBASE_STORAGE_BUCKET=你的存储桶
VITE_FIREBASE_MESSAGING_SENDER_ID=你的消息发送ID
VITE_FIREBASE_APP_ID=你的应用ID

2. 更新Firebase配置代码 #

把代码中process.env.REACT_APP_*替换为import.meta.env.VITE_*，修改后的代码如下：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

console.log(import.meta.env);

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);
const auth = getAuth(app);

export default auth;

3. 重启开发服务器 #

环境变量修改后，需要重启Vite开发服务器才能生效。

可选方案（不推荐） #

如果不想修改变量前缀，可以在vite.config.js中配置自定义的环境变量前缀：

// vite.config.js
export default {
  envPrefix: 'REACT_APP_'
}

但官方推荐使用VITE_前缀，避免与其他环境变量冲突，同时保持项目符合Vite的规范。

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