vue js 如何在 index.html 中使用“process.env”变量答案

【问题标题】：vue js how "process.env" variables in index.htmlvue js 如何在 index.html 中使用“process.env”变量
【发布时间】：2019-02-22 06:06:42
【问题描述】：

我正在尝试在我的 html 标记中使用 env 变量来根据我是处于生产模式还是开发模式来更改 env 变量。因此，对于使用 mixpanel 的上下文，我有两个项目，一个用于开发，一个用于生产，具有不同的 api 键.我将如何使用 webpack 来执行此操作，在我的 html 中访问我的 process.env.VUE_APP_MIXPANEL env 变量？

【问题讨论】：

要回答这个问题，重要的是要知道你是如何为你的 Vue 项目服务的
@Imre_G 我正在使用 vue ui，然后运行此命令 vue-cli-service serve --open 。所以如果我没记错的话，你不能在 html 脚本标签中使用 process.env
我认为你是对的。也许你可以看看这个：github.com/Glovo/vue-multianalytics#mixpanel
@Imre_G 谢谢..

标签： vue.js webpack vue-cli

【解决方案1】：

使用 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 文件中。

【讨论】：

我试过了，但没用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

显然你需要有这样的变量

VUE_APP_TITLE=My title

在您的 .env 文件中

【讨论】：

我试过了，但没用。