4 步

1. npm install dotenv --save

2. 接下来将以下行添加到您的应用程序中。

   require('dotenv').config()

3. 然后.env在应用程序的根目录下创建一个文件并将变量添加到其中。

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. 最后，添加.env到您的.gitignore文件中，以便 Git 忽略它并且它永远不会出现在 GitHub 上。

如果您使用的是create-react-app，那么您只需要第 3 步和第 4 步，但请记住，变量需要从REACT_APP_它开始工作。

参考：https : //create-react-app.dev/docs/adding-custom-environment-variables/

注意-在 .env 文件中添加变量后需要重新启动应用程序。

参考 - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

所以我自己是 React 的新手，我找到了一种方法来做到这一点。

此解决方案不需要任何额外的包。

步骤 1 ReactDocs

在上面的文档中，他们提到了在 Shell 中导出和其他选项，我将尝试解释的是使用.env文件

1.1 创建Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

重要说明它必须以REACT_APP_ 开头

1.2 访问ENV变量

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 构建环境问题

因此，在我执行步骤 1.1|2 后它不起作用，然后我找到了上述问题/解决方案。React 会在构建时读取/创建 env，因此每次修改 .env 文件时都需要npm run start以便更新变量。

今天有一种更简单的方法可以做到这一点。

只需在根目录中创建 .env.local 文件并在那里设置变量。在你的情况下：

REACT_APP_API_KEY = 'my-secret-api-key'

然后你以这种方式在你的 js 文件中调用它：

process.env.REACT_APP_API_KEY

React 支持环境变量，因为 react-scripts@0.5.0 。你不需要外部包来做到这一点。

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

*注意：我建议使用 .env.local 而不是 .env 因为 create-react-app 在创建项目时将此文件添加到 gitignore。

文件优先级：

npm start: .env.development.local, .env.development, .env.local, .env

npm run build: .env.production.local, .env.production, .env.local, .env

npm 测试：.env.test.local、.env.test、.env（注意 .env.local 丢失）

更多信息：https : //facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Webpack 用户

如果你使用 webpack，你可以安装和使用dotenv-webpack插件，按照以下步骤操作：

安装包

yarn add dotenv-webpack

创建.env文件

// .env
API_KEY='my secret api key'

将其添加到webpack.config.js文件中

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

在您的代码中使用它作为

process.env.API_KEY

有关更多信息和配置信息，请访问此处

1.在根文件夹中创建.env文件

有些来源更喜欢使用.env.development，.env.production但这不是强制性的。

2. 你的变量名 - 必须 - 以 REACT_APP_YOURVARIABLENAME 开头

看来，如果您的环境变量不是这样启动的，那么您就会遇到问题

3. 包括你的变量

包含您的环境变量只需放在您的代码中 process.env.REACT_APP_VARIABLE

您不必安装任何外部依赖项