Angular项目中如何在Capacitor Sync命令中使用不同构建目标

问题背景 #

Angular项目里已经在angular.json定义了development、staging、production几个构建目标，用ng build --configuration=<target_name>就能实现不同环境的部署。但在Capacitor里，直接导入环境文件设置webDir时，始终读的是默认的environment.ts，没法跟着构建目标自动切换，导致每次要构建不同版本都得手动改capacitor.config.ts里的webDir，再跑cap sync，流程太麻烦。

解决方案 #

方案1：用环境变量动态指定webDir #

通过Node.js环境变量传递构建目标，让capacitor.config.ts读取这个变量来设置webDir：

1. 修改capacitor.config.ts：

import { CapacitorConfig } from '@capacitor/cli';

// 从环境变量拿构建目标，默认用development
const buildTarget = process.env.BUILD_TARGET || 'development';

const config: CapacitorConfig = {
  webDir: `dist/${buildTarget}`,
  // 其他配置保持不变
};

export default config;

2. 执行构建同步命令时带上环境变量：

# 构建production版本并同步到iOS
BUILD_TARGET=production npx ng build --configuration=production && npx cap sync ios

# 构建staging版本并同步到iOS
BUILD_TARGET=staging npx ng build --configuration=staging && npx cap sync ios

方案2：在package.json里加脚本简化操作 #

不想每次敲长命令的话，直接在package.json的scripts里加对应命令：

{
  "scripts": {
    "build:prod:ios": "BUILD_TARGET=production ng build --configuration=production && cap sync ios",
    "build:staging:ios": "BUILD_TARGET=staging ng build --configuration=staging && cap sync ios",
    "build:dev:ios": "BUILD_TARGET=development ng build --configuration=development && cap sync ios"
  }
}

之后直接跑脚本就行：

npm run build:prod:ios

跨平台注意：Windows系统里传递环境变量得用set命令，嫌麻烦可以装cross-env包统一写法：

1. 安装依赖：

npm install cross-env --save-dev

2. 修改脚本：

{
  "scripts": {
    "build:prod:ios": "cross-env BUILD_TARGET=production ng build --configuration=production && cap sync ios",
    "build:staging:ios": "cross-env BUILD_TARGET=staging ng build --configuration=staging && cap sync ios"
  }
}

方案3：基于Angular构建结果自动更新Capacitor配置（进阶） #

如果想完全跟着Angular的构建结果自动匹配，可以写个简单的Node脚本，读取构建后的环境文件来更新capacitor.config.ts：

1. 新建update-cap-config.js脚本：

const fs = require('fs');
const path = require('path');

// 获取传入的构建目标参数，默认development
const buildTarget = process.argv[2] || 'development';
// 读取构建后输出到assets的环境文件
const envPath = path.join(__dirname, `dist/${buildTarget}/assets/environment.js`);

// 从环境文件里提取target值
const envContent = fs.readFileSync(envPath, 'utf8');
const match = envContent.match(/target:\s*'([^']+)'/);
const target = match ? match[1] : buildTarget;

// 更新capacitor.config.ts里的webDir
const capConfigPath = path.join(__dirname, 'capacitor.config.ts');
let capConfigContent = fs.readFileSync(capConfigPath, 'utf8');
capConfigContent = capConfigContent.replace(/webDir:\s*`dist\/[^`]+`/, `webDir: \`dist/${target}\``);
fs.writeFileSync(capConfigPath, capConfigContent);

2. 修改angular.json，确保每个构建目标都把环境文件输出到assets目录：
   在对应构建目标的assets数组里加下面这行：

{
  "glob": "environment*.ts",
  "input": "src/environments/",
  "output": "./assets/"
}

3. 在package.json里加脚本：

{
  "scripts": {
    "build:prod:ios": "ng build --configuration=production && node update-cap-config.js production && cap sync ios"
  }
}

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