在我的 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
您可能需要重新启动开发服务器
我在我的 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
安装dotenvyarn 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
您可能需要重新启动开发服务器