如何在React项目中利用环境变量实现功能？

Question

我正在尝试将我的API密钥保存为环境变量，但我不知道如何访问它... 我使用npm安装了dotenv，在根目录下创建了文件，并将密钥放在那里。我尝试在js文件中通过使用process.env.API_KEY来访问它，但它显示该变量未定义。

我尝试在我需要密钥的文件顶部放置require('dotenv').config()，但它给我一个错误...

ERROR in ./node_modules/dotenv/lib/main.js 2:13-28
Module not found: Error: Can't resolve 'path' in ...

我觉得我可能要么将它放在了错误的文件中，要么是我漏掉了某些东西

Answer 1

作为总结：

要在您的React层中读取API_KEY变量，您需要在构建之前导出变量REACT_APP_API_KEY，然后在任何React部分中，您可以通过以下方式获取值：

process.env.REACT_APP_API_KEY

查看链接以了解为什么需要前缀REACT_APP_。

此外，如果您的令牌是长期有效或不可过期的令牌，则不应将其暴露给前端（React）。只有可过期的令牌（授权码oauth2授权）应该暴露给前端层。

查看参考资料以了解如何处理前端变量

参考资料

• 如何检测JS util文件（CRA）运行的环境方法
• 是否可以将React服务器环境变量用于客户端前端？
• 如何使用Env秘钥使用Axios进行获取
• 在生产环境中，使React与不同EC2实例上的后端API服务器通信
• 如何在前端JS应用程序中使用变量替换，就像后端应用程序一样？