Azure DevOps CI流程设置VUE_APP环境变量不生效如何解决

你当前的配置语法本身符合Azure DevOps的任务编写规则，变量不生效的核心原因是Vue CLI 2.x 构建时的环境变量读取逻辑存在跨场景兼容性问题：

• Vue CLI 仅在vue-cli-service build进程启动时，读取当前进程内所有VUE_APP_前缀的环境变量，硬编码打包进静态产物
• 你通过任务env字段注入环境变量的方式，依赖Azure DevOps代理、包管理工具（yarn）、Node.js进程三层的环境变量透传，在Windows代理、yarn 1.x低版本、@vue/cli-service 4.1.0以下版本的组合场景下，很容易出现透传丢失，导致构建进程拿不到变量值
• 如果你的代码仓库内提前提交了.env、.env.production等环境变量文件，且文件内写了VUE_APP_API_KEY的固定值，也可能出现优先级覆盖导致注入值不生效。

优先选择动态生成环境变量文件的方案，完全绕开进程间环境变量透传的兼容性问题，100%适配所有构建代理环境：

1. 先在构建步骤前新增任务，动态生成Vue CLI默认读取的生产环境变量文件.env.production，直接把流水线变量写入文件
2. 再执行正常的构建命令即可，不需要额外给构建任务配置env映射

完整流水线任务示例：

# 第一步：动态生成生产环境变量文件
- task: CmdLine@2
  displayName: Write build env config
  inputs:
    script: echo VUE_APP_API_KEY=$(API_KEY) > .env.production

# 第二步：执行构建
- task: CmdLine@2
  displayName: Build application
  inputs:
    script: yarn build

如果你不想生成env文件，也可以调整构建脚本，直接在执行build命令的同个shell上下文内声明环境变量，避免跨进程透传丢失：

- task: CmdLine@2
  displayName: Build application
  inputs:
    # Linux/macOS代理用下面的写法
    script: |
      export VUE_APP_API_KEY=$(API_KEY)
      yarn build
    # Windows Cmd代理替换为下面的写法
    # script: set VUE_APP_API_KEY=$(API_KEY) && yarn build

• 可以在构建任务前加一行打印命令，确认变量值正确传入：Linux代理执行echo $VUE_APP_API_KEY，Windows Cmd代理执行echo %VUE_APP_API_KEY%
• 如果你的API_KEY是流水线加密（Secret）类型变量，日志中会被替换为***属于正常现象，不影响实际注入
• 检查仓库内预置的.env类文件，如果存在同名变量配置，提前删除或者确保动态生成的.env.production能覆盖原有配置
• 确认package.json内的build脚本是直接调用vue-cli-service build，没有嵌套其他脚本重置环境变量

内容的提问来源于stack exchange，提问作者Quyết