部署Vite React应用后，如何从Netlify UI获取环境变量配置Firebase？

你的问题出在错误的Vite环境变量访问方式上——Vite并没有把环境变量放在import.meta.env.production这个嵌套对象里，正确的做法是直接访问import.meta.env.VITE_xxx格式的变量。

1. 修正代码中的环境变量获取逻辑 #

把原来的代码改成下面这样：

const firebaseConfig = {
    apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_APP_FIREBASE_APP_ID
}

2. 确认Netlify配置的几个关键点 #

• 检查环境变量的键名是否和代码里完全一致（包括大小写），比如必须是VITE_APP_FIREBASE_API_KEY，不能少前缀或者写错字母
• 修改Netlify的环境变量后，必须重新触发部署，否则新的变量不会注入到构建产物中
• Vite规定只有以VITE_开头的环境变量才会暴露给客户端代码，你的变量已经符合这个要求，这部分没问题

3. 验证变量是否正常注入 #

如果还是有问题，可以在代码里添加一行打印，部署后查看浏览器控制台：

console.log('当前环境变量:', import.meta.env);

这样能直观看到哪些变量被成功加载，方便排查是否是Netlify配置的问题。

内容的提问来源于stack exchange，提问作者Vojtěch Černý