如何为Ionic Android/iOS项目添加自定义构建步骤并替换测试资源？

当然可行！Ionic的build/prepare流程完全支持这类环境专属资源替换的需求，比如Beta版和正式版图标切换。下面是一套实用的分步实现方案：

我们通过自定义命令行参数标记环境，再配合脚本自动复制对应环境的资源到Ionic/Capacitor/Cordova的指定目录，实现构建时的资源切换。

1. 整理环境专属资源目录 #

先在项目根目录下规划资源结构，把不同环境的资源分开存放：

• resources/prod/：存放正式版的图标、启动页等资源
• resources/beta/：存放Beta版的专属资源（比如带Beta标识的图标）
• resources/common/：（可选）存放所有环境通用的资源，避免重复

2. 配置命令行脚本简化操作 #

直接在package.json里添加封装好的npm脚本，方便快速触发不同环境的构建/准备：

"scripts": {
  // 正式版构建
  "prebuild:prod": "node replace-resources.js --env=prod",
  "build:prod": "ionic build --prod",
  // Beta版构建
  "prebuild:beta": "node replace-resources.js --env=beta",
  "build:beta": "ionic build --prod",
  // 正式版prepare（同时处理Android和iOS）
  "prepare:prod": "node replace-resources.js --env=prod && ionic prepare android && ionic prepare ios",
  // Beta版prepare
  "prepare:beta": "node replace-resources.js --env=beta && ionic prepare android && ionic prepare ios"
}

3. 编写资源替换脚本 #

写一个简单的Node.js脚本（命名为replace-resources.js），用来根据命令行传入的环境参数，自动复制对应资源到目标目录：

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

// 提取命令行中的环境参数，默认用正式版
const envArg = process.argv.find(arg => arg.startsWith('--env='));
const targetEnv = envArg ? envArg.split('=')[1] : 'prod';

// 定义资源路径
const sourceResDir = path.join(__dirname, `resources/${targetEnv}`);
// 如果是Capacitor，分别指定Android/iOS的原生资源目录
const androidResDir = path.join(__dirname, 'android/app/src/main/res');
const iosIconDir = path.join(__dirname, 'ios/App/App/Images.xcassets/AppIcon.appiconset');

// 复制资源到对应目录（这里以替换Android和iOS图标为例）
try {
  // 复制Android资源
  fs.copySync(path.join(sourceResDir, 'android'), androidResDir, { overwrite: true });
  // 复制iOS图标资源
  fs.copySync(path.join(sourceResDir, 'ios/AppIcon'), iosIconDir, { overwrite: true });
  console.log(`✅ 已成功替换为${targetEnv}环境资源！`);
} catch (err) {
  console.error(`❌ 资源替换失败：${err.message}`);
  process.exit(1);
}

注意：脚本里的路径要根据你实际的项目结构调整，比如如果用Cordova，目标目录换成resources/即可，之后配合cordova-res工具生成适配所有分辨率的资源。

4. 适配Capacitor/Cordova的细节 #

• Capacitor：替换完资源后，执行ionic prepare会自动将资源同步到原生项目，不需要额外操作。
• Cordova：可以在脚本末尾添加npx cordova-res android --skip-config && npx cordova-res ios --skip-config，让Cordova自动生成适配不同设备的图标和启动页。

5. 验证效果 #

执行对应的npm命令即可触发对应环境的资源替换和构建/prepare：

• 正式版：npm run build:prod 或 npm run prepare:prod
• Beta版：npm run build:beta 或 npm run prepare:beta

执行后可以检查原生项目里的资源是否已经替换成对应环境的版本，再打包测试即可。

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