您如何在 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 这个变量 <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 文件。
【讨论】：
以上是关于您如何在 HTML <script src="" 中引用 process.env 变量？反应的主要内容，如果未能解决你的问题，请参考以下文章
如何在 <script> 标记中的 html 上使用 json 脚本并在 <img src=???/> 中填充数据