在Vue项目中使用Azure变量配置环境变量

Question

我有一个vue项目部署在azure devops平台上。我已经在release中配置了一些变量，我想在我的项目中使用它们。

我公司有一个 Angular 项目的示例，他们使用 env.js 和以下代码：

  (function (window) {
     window.__env = window.__env || {};
     window.__env.clientID = 'app-id';
  }(this));

但我不知道如何复制它

app-id 是这个变量：

我想在我的项目中使用azure的变量。我试过这样：

在 ${} 里面放入 azure 的变量名称，但不起作用

[更新]

我有

.env.production

文件：

VUE_APP_CLIENT_ID=#{client-id}#

-> 这个 client-id 是 azure 中的一个变量 我已经划掉的变量之一。

我有一个

vsts-ci.yml

文件，我添加了以下内容：

##### REPLACE TOKENS #####
  - task: qetza.replacetokens.replacetokens-task.replacetokens@5
    displayName: "Replace tokens"
    inputs:
      targetFiles: "$(System.DefaultWorkingDirectory)/.env.production"

我想在我的 vue 组件中通过

process.env.VUE_APP_CLIENT_ID

进行访问，并且我想获取 azure 变量内的值。

现在我已经部署了此代码并且管道返回：

##[warning]  variable not found: adapp-mllab-console-id

所以我不知道如何连接它。

Answer 1

您可以使用“替换令牌”任务来完成您的用例。在您的情况下，您可以将它们替换为 .env 文件中的变量。从使用示例来看：