Azure DevOps发布管道无法替换React env.js变量求助

1. 调整React项目变量存储方式 #

放弃构建时打包的.env文件，在项目public目录下创建独立的env.js，用统一格式占位符定义变量：

window.env = {
  API_URL: "#{API_URL}#",
  APP_TITLE: "#{APP_TITLE}#"
};

React组件中直接引用全局变量，示例：

const apiBaseUrl = window.env.API_URL;

2. CI构建管道配置 #

• 构建完成后，确保public/env.js被包含在输出的构建工件中，CI阶段不替换占位符，留到发布管道处理。

3. 发布管道变量替换（推荐用Replace Tokens任务） #

• 添加Replace Tokens任务到发布阶段：
  • Root directory设为构建工件中env.js的路径，例如$(System.DefaultWorkingDirectory)/[你的工件名称]/public
  • Target files填写env.js
  • Token prefix设为#{，Token suffix设为}#
• 将对应环境的变量组关联到发布管道当前阶段，变量名（如API_URL）需与env.js中的占位符完全一致。

4. Bash脚本替换（替代方案） #

添加Bash任务，执行以下命令（替换路径和变量名）：

sed -i "s/#{API_URL}#/$API_URL/g" $(System.DefaultWorkingDirectory)/[你的工件名称]/public/env.js
sed -i "s/#{APP_TITLE}#/$APP_TITLE/g" $(System.DefaultWorkingDirectory)/[你的工件名称]/public/env.js

• 发布管道变量默认可在脚本中访问，无需额外配置。

5. 常见问题排查 #

• 确认变量组已正确关联到发布管道对应环境阶段，变量值未被覆盖
• 检查env.js在构建工件中的实际路径，确保任务配置路径与实际匹配
• 查看任务日志，确认Replace Tokens或sed命令是否找到目标文件、变量是否正确读取
• 验证占位符格式统一，避免混用不同符号（如{{}}和#{}）

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