解决方案

Question

=“”

我有一个反应app并使用dotenv-webpack来管理我的API密钥。

＆＃xA;＆＃xA;

我有：＆＃xA; - 使用API密钥创建一个.env并对其进行gitignored。＆＃xA; - 必需并添加dotenv作为webpack中的插件。 config.js。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

index.html：

＆＃xA;＆＃xA; < pre>

＆lt;！DOCTYPE html＆gt;＆＃xA;＆lt; html＆gt;＆＃xA; ＆LT; HEAD＆GT;＆＃XA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;＆＃xA; ＆lt; link rel =“stylesheet”href =“/ style / style.css”＆gt;＆＃xA; ＆lt; link rel =“stylesheet”href =“https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css”＆gt;＆＃xA; ＆lt; script src =“https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY”＆gt;＆lt; / script＆gt;＆＃xA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt; div class =“container”＆gt;＆lt; / div＆gt;＆＃xA; ＆LT; /体＆GT;＆＃XA; ＆lt; script src =“/ bundle.js”＆gt;＆lt; / script＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;

＆＃xA;＆＃xA;

我如何在这里引用process.env.API_key？

＆＃xA;＆＃xA;

 ＆lt; script src =“https://maps.googleapis.com/maps/api/ js？key = [API_KEY]“＆gt;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

我尝试过在.js文件中使用的反引号，像这样 $ {API_KEY} ，但这在.html文件中不起作用。

＆＃XA;

Answer 1

简单的使用方式

以HTML

<p>%NODE_ENV%</p>

和脚本中

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

Answer 2

解决方案

您无法直接在process.env内引用html变量。

从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>

请参阅：Writing Your Own Templates

注释

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

Answer 3

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

我能够在上面的评论中使用bigmugcup发布的代码来解决这个问题。我没有修改webpack.config.js文件。

Answer 4

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

来使用它

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

已记录here

你如何在HTML中引用process.env变量<script src =“”？=“”react =“”

4 个答案:

解决方案

HtmlWebpackPlugin

Webpack.config.js

template.html

注释