您如何在 HTML <script src="" 中引用 process.env 变量?反应

Posted

技术标签:

【中文标题】您如何在 HTML <script src="" 中引用 process.env 变量?反应【英文标题】:How do you reference a process.env variable in HTML <script src="" ? React 【发布时间】: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做一个脚本元素... 检查我的更新答案+下面的示例... 【参考方案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_ 开头的环境变量。

【讨论】:

更多信息***.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 这个变量 &lt;script&gt; const some_variable = htmlWebpackPlugin.options.apiUrl; if(some_variable) do something &lt;/script&gt; 。另一个问题是 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 文件。

【讨论】:

以上是关于您如何在 HTML <script src="" 中引用 process.env 变量?反应的主要内容,如果未能解决你的问题,请参考以下文章

如何在 <script> 标记中的 html 上使用 json 脚本并在 <img src=???/> 中填充数据

如何在 <script> 内的 src 文件中要求 js 文件?

如何快速搞定websocket

html中如何显示<script>本身

如何将高德地图直接用到html中

如何从javascript运行<script src =>标签[重复]