Vue JS如何在index.html中使用"process.env"变量

Question

Vue JS如何在index.html中使用"process.env"变量

19

我想在我的HTML标记中使用环境变量来根据我是处于生产模式还是开发模式来更改环境变量。因此，为了上下文的考虑，我有两个Mixpanel项目，一个用于开发，另一个用于生产，具有不同的API密钥。我应该如何使用Webpack来做到这一点，在我的HTML中访问process.env.VUE_APP_MIXPANEL环境变量？

- okandas

回答这个问题之前，重要的是要知道你是如何为你的Vue项目提供服务的。 - Imre_G

@Imre_G 我正在使用vue ui，然后运行这个命令 vue-cli-service serve --open。所以如果我没记错的话，在HTML脚本标签中不能使用process.env。 - okandas

我认为你是正确的。也许你可以看一下这个链接：https://github.com/Glovo/vue-multianalytics#mixpanel - Imre_G

@Imre_G 谢谢您.. - okandas

4个回答

4

使用谷歌reCAPTCHA，我可以像这样包含我的脚本：

<script src="https://www.google.com/recaptcha/api.js?render=<%= process.env.VUE_APP_RECAPTCHA_SITE_KEY %>"></script>

环境变量是VUE_RECAPTCHA_SITE_KEY。它可能存在于.env文件中。

- Misael Abanto

我尝试过了，但没有成功。 - Mustafa

这适用于 .env.production 中的变量吗？ - timbmg

是的，.env.production 只是定义特定环境下环境变量的一种方式。更多信息请参考：https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used - Misael Abanto

3

当在 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 -->

- TinyTiger

0

回答我的问题后，我发现了这个包，它允许你将谷歌分析添加到你的Vue项目中.. https://github.com/MatteoGabriele/vue-analytics 或者 https://github.com/Glovo/vue-multianalytics如果你还想添加其他跟踪提供商。

- okandas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matteogll · Accepted Answer

如果您正在使用默认的Webpack模板，您可以使用以下语法（例如）在index.html中访问.env变量：

如果您使用默认的Webpack模板，则可以使用此语法（例如）在index.html中访问.env变量：

<html>
  <head>
    <title><%= VUE_APP_TITLE %></title>
  </head>
  <body>
    ...
  </body>
</html>

显然，你需要像这样拥有一个变量

VUE_APP_TITLE=My title

在你的 .env 文件中