在我的React应用程序中访问heroku config var

Question

我已经在我的Heroku应用程序中定义了一个配置变量“ BASE_URL”，我试图以

在我的React应用程序中访问它

process.env.BASE_URL

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

Answer 1

您必须使用module that loads environment variables。然后，

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

选中此post，非常有用。

Answer 2

如果您使用Create React App（或react-scripts），请在变量前加上REACT_APP_，例如REACT_APP_BASE_URL和Create React App automatically uses its value during the build process。

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

Answer 3

用于React es6使用

从“ dotenv / config”导入{}

Answer 4

首先使用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

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