• 不好意思又问了个老问题 *
  react-scripts实际上使用了dotenv库。

使用react-scripts@0.2.3及更高版本，您可以通过以下方式使用环境变量：
1.在项目的根目录下创建**.env文件
1.设置以REACT_APP_开头的环境变量
1.通过组件中的process.env.REACT_APP_...**访问

• .env*

REACT_APP_BASE_URL=http://localhost:3000

字符串

• App.js*

const BASE_URL = process.env.REACT_APP_BASE_URL;

型
如需详细信息，请参阅docs。

简单的回答是否定的。浏览器无法访问本地或服务器环境变量，因此dotenv没有什么可查找的。相反，您可以在React应用程序（通常在设置模块中）中指定普通变量。
Webpack可以从构建计算机中获取环境变量并将其烘焙到设置文件中。但是，它实际上是在构建时而不是运行时替换字符串。因此，应用程序的每个构建版本都将硬编码到其中。然后，可以通过process.env对象访问这些值。

var nodeEnv = process.env.NODE_ENV;

字符串
此外，您还可以使用DefinePlugin for webpack，它允许您根据构建目标（dev、prod等）显式指定不同的值。请注意，您必须将JSON.stringify的所有值传递给它。

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

型
这适用于任何类型的公开详细信息，但决不能用于任何类型的私钥、密码或API机密。这是因为任何绑定的值都是可公开访问的，如果它们包含敏感的详细信息，则可能被恶意使用。对于这类事情，您需要编写一些服务器端代码并构建一个简单的API，该API可以使用秘密与第三方API进行身份验证，然后将相关详细信息沿着给您的客户端应用程序。您的服务器端API充当中介，在获取所需数据的同时保护您的机密。

1.创建.env文件

API_URL=http://localhost:8000

1.安装dotenv npm包

$ npm install --save-dev dotenv

1.配置webpack以添加环境变量

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // call dotenv and it will return an Object with a parsed key 
  const env = dotenv.config().parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
    new webpack.DefinePlugin(envKeys)
  ]
};

1.很棒的工作！享受React和dotenv。

实际上，你可以在你的React应用中使用webpack。此外，有几种方法可以做到这一点。但是，请记住，它仍然是一个构建时配置。
1.与上面的答案类似。你在webpack配置中导入dotenv，然后使用DefinePlugin将变量传递给React应用。关于如何根据当前配置注入.env文件的更完整的指南可以在in this blog找到。
1.使用dotenv-webpack plugin。我个人觉得很方便。假设你有环境：dev、staging和prod。为每个环境（.env.dev、.env.staging等）创建.env文件。在webpack配置中，您需要为环境选择正确的文件：

const Dotenv = require('dotenv-webpack');

module.exports = (env, argv) => {
    const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env';

    const config = {
        ...
        plugins: [
            new Dotenv({
                path: envPath
            })
        ]
    };

    return config;
};

字符串
当您为特定环境构建应用程序时，只需将环境名称传递给webpack：

webpack --config webpack.config.js --env.ENVIRONMENT=dev

型

要在React项目中设置.env文件，请执行以下步骤：
1.在React项目的根目录下创建一个名为.env的新文件。
1.在.env文件中以VARIABLE_NAME=VALUE添加环境变量。举例来说：

REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=YOUR_API_KEY

字符串
注意：建议在你的环境变量前面加上REACT_APP_，以确保它们被React的构建过程选中。
1.保存.env文件。
1.重新启动开发服务器或构建过程以加载环境变量。
在你的React组件中，你可以像这样访问环境变量：

const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

型
确保不要将.env文件提交给Git等版本控制系统，因为它可能包含敏感信息，如API密钥和其他凭据。
如果你使用的是Create React App，它会自动从.env文件中提取变量。但是，如果您使用的是自定义设置，则可能需要相应地配置生成工具以支持.env文件。

我刚刚在source文件夹中创建了config.json：

{
    "api_url" : "http://localhost:8080/"
}

字符串
然后在文件中要求它我需要它

const config = require('./config.json');

型
并使用API_url