Vue项目如何使用Azure DevOps发布变量组配置MSAL登录

1. 确认变量组已关联到CI/CD管道 #

• 进入Azure DevOps的管道 -> 目标CI管道 -> 编辑
• 点击右上角变量 -> 变量组，确保包含client-id的变量组已添加到当前管道
• 检查变量组内的变量名是否确实为client-id（Azure变量名不区分大小写，但Replace Tokens默认区分，需注意匹配）

2. 修正Replace Tokens任务配置 #

在vsts-ci.yml中确保任务参数正确：

- task: replacetokens@5
  inputs:
    rootDirectory: '$(Build.SourcesDirectory)'
    targetFiles: '**/.env.production' # 确认路径指向你的生产环境配置文件
    encoding: 'utf-8'
    tokenPattern: 'default' # 默认匹配#{variable}#格式，无需修改
    actionOnMissing: 'warn' # 若需严格校验可改为'fail'
    keepToken: false
    taskMode: 'inline'

• 重点核对targetFiles路径，若.env.production在子目录需调整路径
• 若变量名存在大小写差异，可添加ignoreCase: true参数忽略大小写匹配

3. 调整任务执行顺序（关键） #

Vue构建时会将VUE_APP_*变量直接打包进代码，因此必须先替换配置文件，再执行构建，确保CI任务顺序如下：

# 先替换环境变量文件
- task: replacetokens@5
  inputs:
    targetFiles: '**/.env.production'
    # 其他配置...

# 再执行依赖安装与构建
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'Install dependencies'

- script: npm run build
  displayName: 'Build Vue project'

4. 可选：模拟Angular动态加载配置方案 #

若需支持部署阶段动态替换配置，可复用原Angular的env.js模式：

• 在项目public目录创建env.js：

window.__env = {
  clientID: '#{client-id}#'
};

• 在index.html的<head>中引入该文件：

<script src="<%= BASE_URL %>env.js"></script>

• Vue项目中直接通过window.__env.clientID读取配置，例如MSAL初始化：

import { PublicClientApplication } from '@azure/msal-browser';

const msalInstance = new PublicClientApplication({
  auth: {
    clientId: window.__env.clientID,
    // 其他配置项
  }
});

• 在CI.yml中，将Replace Tokens任务的targetFiles指向public/env.js，该任务可放在构建后、部署前执行，无需重新构建

5. 验证变量替换结果 #

添加脚本任务查看替换后的文件内容，确认变量是否生效：

- script: cat .env.production # 或 public/env.js
  displayName: 'Check replaced variables'

内容的提问来源于stack exchange，提问作者Oihane