在我的 React 应用程序中访问 heroku 配置变量

Question

我在我的 Heroku 应用程序中定义了一个配置变量“BASE_URL”，我试图在我的 React 应用程序中访问它

process.env.BASE_URL

但是当我 console.log 它时它给了我 undefined 因为它似乎不存在。 如何在我的 React 应用程序中访问 Heroku 配置变量？

Answer 1

如果您使用 Create React App（或 react-scripts），请在变量前面加上REACT_APP_ ，例如REACT_APP_BASE_URL ，并且 Create React App 在构建过程中自动使用其值。

注意：您不得以这种方式泄露任何秘密，例如 API 密钥或密码。 所有这些变量的实际内容都附加到生产构建文件本身，只需阅读面向公众的代码文件即可自由访问。

Answer 2

您必须使用加载环境变量的模块。 然后，

require('dotenv').config()
...
console.log(process.env.BASE_URL);

看看这个帖子，很有用。

Answer 3

首先使用 yarn/npm 安装 dotenv

yarn add dotenv

或者

npm install dotenv

然后在 src 文件夹的父目录中创建一个.env文件，然后在以 REACT_APP_ 为前缀的 .env 文件中添加您的密钥

REACT_APP_YOUR_API=15dw8...

现在在你的 app.js 中配置 dotenv

require('dotenv').config()

现在您可以使用前缀 process.env.REACT_APP_ 访问您的环境变量，例如

 process.env.REACT_APP_YOUR_API

您可能需要重新启动开发服务器

Answer 4

用于反应 es6 使用

从“dotenv/config”导入 {}