【问题标题】：How do you reference a process.env variable in HTML <script src="" ? React您如何在 HTML <script src="" 中引用 process.env 变量？反应
【发布时间】：2018-08-28 18:35:30
【问题描述】：

我有一个 react 应用程序，并且正在使用 dotenv-webpack 来管理我的 API 密钥。

我有： - 使用 API 密钥创建了一个 .env 并将其 gitignored。 - 需要并添加 dotenv 作为 webpack.config.js 中的插件。

之后，我可以使用 process.env.api_key 引用 .js 文件中的一个键。但我在尝试在脚本标记的 index.html 中引用它时遇到问题。

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

如何在此处引用 process.env.API_key？

<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>

我曾尝试使用在 .js 文件中有效的反引号，例如 ${API_KEY}，但这在 .html 文件中不起作用。

【问题讨论】：

不行，用js做一个脚本元素...
检查我的更新答案+下面的示例...

标签： reactjs google-maps webpack environment-variables gitignore

【解决方案1】：

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

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

正如the docs中所说的那样

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

【讨论】：

更多信息stackoverflow.com/questions/51744375/…

【解决方案2】：

解决方案

您不能直接在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}`,

        });
      ]
    }

模板.html

模板里面可以访问参数：

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

见：Writing Your Own Templates

注意事项

这是来自 comment 的修改答案，请阅读完整对话。

【讨论】：

谢谢。我还不清楚。我在哪里添加您的代码？我尝试将所有内容放在标签之间，但我收到“参考错误：未定义进程”。我在上面添加了 index.html。
您可以通过webpack.config 访问进程对吗？
我已经通过 'process.env.NODE_ENV.' 访问了 webpack.config 中的进程。另外，我在 .js 文件的另一个 API 调用中访问了 process.env。问题只是在 index.html 中访问。
我将以下代码放在了地图渲染的 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);
如何像这样在脚本中访问 htmlWebpackPlugin.options.apiUrl 这个变量 <script> const some_variable = htmlWebpackPlugin.options.apiUrl; if(some_variable) { do something } </script> 。另一个问题是 here show do this syntax works 我的意思是 htmlWebpackPlugin 我们如何获得这个变量上下文在这里。

【解决方案3】：

你可以使用的简单方法

在 HTML 中

<p>%NODE_ENV%</p>

在脚本中

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

【讨论】：

【解决方案4】：

我将以下代码放在地图呈现的 componentWillMount 中它起作用了（至少在开发中： const API_KEY = process.env.GOOGLEMAP_API_KEY；常量脚本 = document.createElement('script');脚本.src = https://maps.googleapis.com/maps/api/js?key=${API_KEY}; document.head.append(脚本);

我能够使用 bigmugcup 在上面的 cmets 中发布的代码使其工作。我没有修改 webpack.config.js 文件。

【讨论】：