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

Question

我\xc2\xb4已经浏览了 vite、react.js 和开发博客的所有文档，但我没有让它工作

\n

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

\n

VITE_API_KEY = XXX \n

\n

在我的 firebase.js 文件中，我加载它的方式如下：

\n

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

\n

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

\n

I\xc2\xb4ve 也尝试从组件中阻塞它，但它具有相同的结果

\n

有什么建议/方法来解决这个问题？

\n

Answer 1

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

\n

// .env\nVITE_API_KEY=abcd1234\n   \n

\n

// firebase.js\nconst firebaseConfig = {      \n  apiKey: import.meta.env.VITE_API_KEY,\n  \xe2\x8b\xae\n}\n

\n

演示

\n

相关文档可以在Vite Env变量中找到文档

\n

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 测试过它并且有效

Answer 3

如果所有变量都以 VITE_ 开头，则有效