Vue+Vite项目中使用process.env初始化Firebase报错求助

问题根源 #

Vite的环境变量规则和Vue CLI完全不同：

• Vite不会向客户端代码注入process.env，直接引用会触发process is not defined报错
• Vite仅会暴露以VITE_为前缀的环境变量到客户端代码中，你之前使用的VUE_APP_前缀不符合规则，所以即便改用import.meta.env也拿不到值

解决步骤 #

1. 修改.env文件的变量前缀
   把所有VUE_APP_开头的变量替换成VITE_，示例：

   VITE_API_KEY=your_api_key_here
   VITE_AUTH_DOMAIN=your_auth_domain_here
   VITE_PROJECT_ID=your_project_id_here
   VITE_STORAGE_BUCKET=your_storage_bucket_here
   VITE_MESSAGING_SENDER_ID=your_sender_id_here
   VITE_APP_ID=your_app_id_here
   

2. 更新firebase.js中的变量引用
   把process.env.VUE_APP_*替换为import.meta.env.VITE_*，修改后的代码：

   import { initializeApp } from "firebase/app";
   import { getAuth } from "firebase/auth"
   import { getFirestore } from "firebase/firestore"
   
   const firebaseConfig = {
       apiKey: import.meta.env.VITE_API_KEY,
       authDomain: import.meta.env.VITE_AUTH_DOMAIN,
       projectId: import.meta.env.VITE_PROJECT_ID,
       storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
       messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
       appId: import.meta.env.VITE_APP_ID
   };
   
   const app = initializeApp(firebaseConfig);
   const auth = getAuth(app);
   const db = getFirestore(app);
   
   export { auth, db };
   

3. 重启Vite开发服务器
   环境变量修改后必须重启服务器才能生效，仅刷新页面不会加载新的变量值

4. 可选：多环境区分配置
   如果需要区分开发/生产环境，可以创建.env.development（开发环境）和.env.production（生产环境）文件，分别配置对应环境的变量，Vite会自动根据当前运行环境加载对应文件

额外检查项 #

• 确保.env文件放在项目根目录（与vite.config.js、package.json同层级）
• 不要将.env文件提交到版本控制（默认.gitignore已包含，无需额外操作）
• 如果在vite.config.js中自定义了envDir配置，需确保.env文件位于指定目录下

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