我正在尝试在我的 html 标记中使用 env 变量来根据我是处于生产模式还是开发模式来更改 env 变量。因此对于使用 mixpanel 的上下文，我有两个项目，一个用于开发，一个用于使用不同 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为了回答我自己的问题，然后我遇到了这个包，它允许我将谷歌分析添加到您的 vue 项目中。https://github.com/MatteoGabriele/vue-analytics 或 https://github com/Glovo/vue-multianalytics 如果您还想添加其他跟踪提供商。
在 index.html 中使用
.env<link
rel="icon"
type="image/ico"
href="<%= process.env.FAVICON_ICO_URL %>"
/>
或者这个：
<title><%= process.env.SITE_TITLE %></title>
当使用
.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 -->