我正试图在html标记中使用env变量，根据我是处于生产模式还是开发模式来更改env变量。。因此，对于使用mixtpanel的上下文，我有两个项目，一个用于开发，另一个用于使用不同api键的生产。我该如何使用webpack来访问html中的process.env.VUE_APP_MIXPANEL env变量？
如果您使用默认的Webpack模板，您可以使用以下语法访问index.html中的.env变量(例如)：
<html>
<head>
<title><%= VUE_APP_TITLE %></title>
</head>
<body>
...
</body>
</html>
显然，你需要一个像这样的变量
VUE_APP_TITLE=My title
在.env文件中
使用Google reCAPTCHA，我包含了这样的脚本：
<script src="https://www.google.com/recaptcha/api.js?render=<%= process.env.VUE_APP_RECAPTCHA_SITE_KEY %>"></script>
环境变量为VUE_RECAPTCHA_SITE_KEY。它可能存在于.env文件中。
将index.html中的.env用作html时，可以使用以下内容：
<link
rel="icon"
type="image/ico"
href="<%= process.env.FAVICON_ICO_URL %>"
/>
或者这个：
<title><%= process.env.SITE_TITLE %></title>
当使用注入到index.html标签中的.env变量时，您需要将它们用作字符串，如下所示：
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(
window,
document,
'script',
'dataLayer',
'<%= process.env.GTM_CONTAINER_ID %>'
);
</script>
<!-- End Google Tag Manager -->
为了回答我自己的问题，我看到了这个包，它允许我将谷歌分析添加到你的vue项目中。。https://github.com/MatteoGabriele/vue-analytics或https://github.com/Glovo/vue-multianalytics如果您还想添加其他跟踪提供程序。