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

accessing heroku config var in my React app

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

process.env.BASE_URL

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

你必须使用 module that loads environment variables。那么,

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

检查这个post,很有用。

如果您使用 Create React App(或 react-scripts),请在变量前添加 REACT_APP_,例如 REACT_APP_BASE_URL,然后创建 React App automatically uses its value during the build process,然后创建它可在 process.env.

请注意,该值是在构建时根据执行构建的机器或进程上的环境确定的。如果构建是通过推送到 Heroku 完成的,就像通常在 Heroku React 应用程序中那样,那么通过在构建时在 Heroku 中设置的环境。

如果您不使用 Create React App,而是使用 Webpack,则需要使用 Webpack EnvironmentPlugin 来定义所需的环境。

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

用于 react es6 使用

从 'dotenv/config'

导入 {}

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

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