使用 vite 在 React 应用程序中加载环境变量

Question

我已经阅读了 vite、react.js 和开发博客中的所有文档，但我无法正常工作

我有一个 .env 文件，其中包含以下内容

VITE_API_KEY = XXX

在我的 firebase.js 文件中，我正在加载它：

const firebaseConfig = {
  apiKey: import.meta.env.API_KEY,
   .....
   .....
}
// Initialize Firebase
const app = initializeApp(firebaseConfig);

但它显示为 null，我重新启动了开发服务器，重新安装了 node_modules（以防万一）将 var 前缀更改为 REACT_APP_XX，尝试使用 process.env.XX 全局对象，基本上通过所有不同的方式从 react

中的 .env 文件读取变量

我也试过从组件中堵塞它，但结果相同

任何suggestions/methods解决这个问题？

Answer 1

代码中使用的环境变量名称必须与 .env 文件中设置的名称相匹配：

// .env
VITE_API_KEY=abcd1234

// firebase.js
const firebaseConfig = {      
  apiKey: import.meta.env.VITE_API_KEY,
  ⋮
}

Answer 2

终于解决了这个问题，事情是这样的：

import.meta.env.VITE_XX

这个环境变量在生产过程中被静态替换，而不是在开发过程中，至少在我的情况下，我通过检查模式解决了这个问题

 if(import.meta.env.MODE === "development"){
//use dev keys
}
else{
//use .env variables
}

在生产模式下

import.meta.env.VITE_XX

变量将正确加载，因此您可以将它们作为环境变量添加到部署服务中，它会正常工作。我已经用 vercel 测试过它并且有效

loading env variables in react app using vite