Vue项目配置Azure DevOps环境变量失败求助

问题根源 #

你遇到的variable not found: client-id警告，核心原因是：你把变量配置在Azure DevOps的发布环节，但Replace Tokens任务放在了CI流水线（vsts-ci.yml）中——CI阶段无法访问发布阶段的专属变量，所以任务找不到对应的值。

下面提供三种可行的解决方案，按需选择：

方案一：CI阶段替换.env文件（适合变量在CI阶段即可确定的场景） #

1. 迁移变量位置：把client-id变量从发布环节移到Azure DevOps的库变量组或CI流水线的变量列表中，确保CI阶段能访问到。
2. 配置Replace Tokens任务：在vsts-ci.yml中保留Replace Tokens任务，确保配置匹配你的占位符规则：

- task: ReplaceTokens@4
  inputs:
    targetFiles: '**.env.production' # 目标文件路径
    encoding: 'utf-8'
    tokenPattern: 'default' # 默认模式就是#{变量名}#，和你的占位符一致
    actionOnMissing: 'warn' # 找不到变量时警告，可按需改为error

3. Vue中访问变量：在组件中直接用process.env.VUE_APP_CLIENT_ID获取值——Vue会自动把所有VUE_APP_开头的环境变量注入到项目中。

方案二：发布阶段替换已构建的静态文件（适合变量仅在发布环节确定的场景） #

如果变量必须在发布环节配置，可跳过CI阶段的替换，直接在发布阶段修改打包后的文件：

1. 设置占位符：在.env.production中写占位符：VUE_APP_CLIENT_ID=__CLIENT_ID__，正常执行CI构建。
2. 添加发布环节的文件替换任务：在Azure DevOps发布流水线中添加「文件替换」任务，配置如下：
   • 目标文件：**/*.js（Vue构建后会把环境变量打包进js文件）
   • 替换规则：__CLIENT_ID__=#{client-id}#（client-id是你在发布环节配置的变量）
3. 访问变量：依然用process.env.VUE_APP_CLIENT_ID在组件中取值。

方案三：复刻Angular的env.js动态加载方式（最灵活的方案） #

这种方式不依赖Vue的环境变量注入，完全复刻Angular的env.js思路：

1. 创建env.js文件：在Vue项目的public文件夹下新建env.js，内容如下：

window.env = {
  VUE_APP_CLIENT_ID: '#{client-id}#'
};

2. 引入env.js：在public/index.html的<head>标签中添加：

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

3. 替换占位符：在CI或发布环节添加Replace Tokens任务，目标文件设为public/env.js，替换规则和之前一致。
4. 访问变量：在Vue组件中直接通过window.env.VUE_APP_CLIENT_ID获取值。

注意事项 #

• 所有VUE_APP_开头的变量才会被Vue-cli注入到项目中，如果你用方案一，必须遵守这个命名规则。
• Azure DevOps变量名不区分大小写，但建议和占位符中的名称完全一致，避免不必要的问题。
• 如果用Replace Tokens任务，确保任务的token前缀/后缀和你写的占位符匹配（你用的#{...}#是默认模式，无需额外修改）

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