Question

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

Answer 1

如果将vue cli与Webpack模板一起使用（默认配置），则可以创建环境变量并将其添加到.env文件。

将在项目的process.env.variableName下自动访问变量。加载的变量也可用于所有vue-cli-service命令，插件和依赖项。

您有一些选择，来自环境变量和模式文档：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

您的.env文件应如下所示：

MY_ENV_VARIABLE=value
ANOTHER_VARIABLE=value

据我了解，您需要做的就是创建.env文件并添加变量，然后就可以开始了！：）

Answer 2

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

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

显然，您需要具有这样的变量

VUE_APP_TITLE=My title

在您的.env文件中

Answer 3

要回答我自己的问题，然后我遇到了这个软件包，该软件包使您可以将Google Analytics（分析）添加到您的Vue项目中。.https://github.com/MatteoGabriele/vue-analytics或https://github.com/Glovo/vue-multianalytics（如果您还想添加其他跟踪提供程序）。

Answer 4

使用 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 js如何在index.html中使用“ process.env”变量

4 个答案: