如果您已经在使用create-react-app，那么通过更新到

<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_API_KEY%"></script>

就像文档里说的
您还可以访问public/index.html中以REACT_APP_开头的环境变量。

溶液

不能直接在html中引用process.env变量。
从index.html创建您自己的模板，并使用参数替换API url。

HtmlWebpackPlugin

简化HTML文件的创建以服务于您的webpack包。
你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或者使用你自己的加载器。

Webpack.config.js

HtmlWebpackPlugin允许您创建参数并将其传递到模板：

const api_key = process.env.api_key;
   const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: 'index.js',
      plugins: [
        new HtmlWebpackPlugin({
          inject: false,
          template: './template.html',

          // Pass the full url with the key!
          apiUrl: `https://maps.googleapis.com/maps/api/js?key=${api_key}`,

        });
      ]
    }

template.html

在模板内部，您可以访问参数：

<script src="<%= htmlWebpackPlugin.options.apiUrl %>"></script>

请参阅：编写自己的模板

注意事项

这是一个修改后的答案，从这个评论，请阅读完整的对话。

你可以用简单的方法
在HTML中

<p>%NODE_ENV%</p>

在脚本中

<script>
if('%NODE_ENV%' === 'production') {
.... some code
}
</script>

我把下面的代码放在componentWillMount中，在那里Map渲染和它工作（至少在开发中：const API_KEY = process.env.GOOGLEMAP_API_KEY;const script = document.createElement（'script'）;script.src = https://maps.googleapis.com/maps/api/js?key= ${API_KEY};document.head.append（script）;
我可以使用bigmugcup在上面的评论中发布的代码来实现这一点。我没有修改webpack.config.js文件。

我一直在寻找如何有条件地设置属性值的问题，几分钟后，我实际上找到了一种处理这种情况的方法，我在下面列出。它由HtmlWebpackPlugin处理。这个片段也将帮助您在HTML文件中引用环境变量。

环境设置

• 我正在使用Create React App，它在模块中有HtmlWebpackPlugin，在弹出应用程序时将可见。
• 我的应用程序处于默认状态，即未弹出
  环境变量定义

我在Package.json文件.的scripts属性中设置环境变量[APP_ENV]，如下所示

"scripts": {
    "start": "set APP_ENV=development&& react-scripts start",
    "build:prod": "set APP_ENV=production&& react-scripts build",
    "eject": "react-scripts eject"
  }

引用HTML文件变量

<link rel="stylesheet" href="https://<%= process.env.APP_ENV ==='production' ? 'prod.domain': 'dev.domain'%>/main.min.css" />