如果您已经在使用 create-react-app，则可以通过更新到

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

正如文档中所说

您还可以访问 public/index.html 中以 REACT_APP_ 开头的环境变量。

解决方案

您不能process.env直接在html.

从中创建您自己的模板index.html并用参数替换 api url。

HtmlWebpack 插件

简化 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}`,

        });
      ]
    }

模板.html

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

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

请参阅：编写自己的模板

笔记

这是此评论的修改答案，请阅读完整对话。

您可以使用的简单方法

在 HTML 中

<p>%NODE_ENV%</p>

并在脚本中

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

我将以下代码放在地图呈现的 componentWillMount 中，它可以工作（至少在开发中：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 文件。