我有一个react应用程序，正在使用dotenv-webpack来管理我的API密钥。
我有：-用API键创建了一个.env，gitignore了它。-需要并在webpack.config.js.中添加了dotenv作为插件
之后，我可以使用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文件中不起作用。
如果您已经在使用create-react应用程序，则可以通过更新到来使用
<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中，映射在那里渲染它起了作用(至少在开发过程中：const API_KEY=进程.env.GOGLEMAP_API_KEY；const脚本=document.createElement('script')；脚本.src=https://maps.googleapis.com/maps/api/js?key=$｛API_KEY｝；document.head.append(脚本)；
我能够使用bigmugcup在上面的评论中发布的代码来实现这一点。我没有修改webpack.config.js文件。
我一直在寻找如何有条件地设置属性值的问题，几分钟后，我实际上找到了一种处理这种情况的方法，我将在下面列出。它由HtmlWebpackPlugin处理。这个片段还将帮助您在HTML文件中引用环境变量。
环境设置
- 我正在使用Create React应用程序，该应用程序在模块中具有HtmlWebpackPlugin，在弹出应用程序时将可见
- 我的应用程序处于默认状态i-e未弹出
环境变量定义
我正在Package.json文件的脚本属性中设置环境变量[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" />