很抱歉提出旧问题，但
react-scripts实际上在幕后使用了dotenv库。

使用 react-scripts@0.2.3 及更高版本，您可以通过以下方式使用环境变量：

1. 在项目的根目录中创建.env文件
2. 在那里设置以REACT_APP_开头的环境变量
3. 通过process.env.REACT_APP_...在组件中访问它

.env

REACT_APP_BASE_URL=http://localhost:3000

应用程序.js

const BASE_URL = process.env.REACT_APP_BASE_URL;

有关更多详细信息，请参阅文档。

最简洁的答案是不。浏览器无法访问本地或服务器环境变量，因此 dotenv 无需查找。相反，您在 React 应用程序中指定普通变量，通常在设置module中。

可以让 Webpack 从构建机器中获取环境变量并将它们烘焙到您的设置文件中。但是，它实际上是在构建时而不是运行时替换字符串。因此，您的应用程序的每个构建都会将值硬编码到其中。然后可以通过process.env对象访问这些值。

var nodeEnv = process.env.NODE_ENV;

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

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

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

实际上，您可以在带有 webpack 的 React 应用程序中使用 dotenv。此外，有几种方法可以做到这一点。但是，请记住，它仍然是构建时配置。

1. 与上面的答案类似的方法。您导入dotenvwebpack 配置并使用 DefinePlugin 将变量传递给您的 React 应用程序。.env可以在此博客中找到有关如何根据当前配置注入文件的更完整指南。

2. 使用dotenv-webpack插件。个人觉得真的很方便。假设您有环境：dev,staging和prod。您可以为每个环境（创建.ENV文件.env.dev，.env.staging等等）。在你的 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

1. 创建 .env 文件

   API_URL=http://localhost:8000
   

2. 安装 dotenv npm 包

   $ npm install --save-dev dotenv
   

3. 配置 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)
     ]
   };
   

4. 很好！享受 React 和 dotenv。

我刚刚在源文件夹中创建了一个 config.json：

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

然后在我需要的文件中要求它

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

并使用了 config.api_url