Ionic 5中如何实现构建时自动复制指定JSON文件到目标路径

Ionic 5 已弃用停止维护的@ionic/app-scripts，默认基于 Angular CLI 完成构建，可通过以下两种方案实现自动复制资源的需求：

方案一：修改angular.json assets配置（推荐，无需额外依赖） #

该方案为Angular原生支持，配置后ionic serve本地调试和ionic build构建时都会自动生效，资源会直接输出到构建后的dist目录对应路径：

• 打开项目根目录下的angular.json文件，定位到projects > 你的项目名 > architect > build > options > assets配置项
• 在assets数组中新增如下规则：

{
  "glob": "*.json",
  "input": "src/app/submodules/submodule1_src/assets/i18n",
  "output": "assets/i18n/submodule1_src"
}

参数说明：

• glob：匹配规则，*.json即匹配目录下所有json文件，覆盖你存放的es.json、en.json、ch.json三类文件
• input：源文件所在的目录路径
• output：目标路径，相对于构建输出的dist根目录

如果你的需求是要把资源复制到源码目录src/assets/i18n/submodule1_src而非构建输出目录，可以用第二种方案。

方案二：npm脚本搭配copyfiles工具（适合自定义复制逻辑） #

• 首先安装copyfiles为开发依赖：
  npm install copyfiles --save-dev
• 打开项目根目录的package.json，修改scripts中的build命令：

"scripts": {
  "build": "copyfiles -f src/app/submodules/submodule1_src/assets/i18n/*.json src/assets/i18n/submodule1_src && ionic build"
}

配置完成后执行npm run build触发构建，就会先执行文件复制逻辑，再运行Ionic构建命令。

如果你使用的是Ionic 5 + React/Vue的技术栈，逻辑同理：React版可修改craco.config.js添加copy插件规则，Vue版可修改vue.config.js配置copy-webpack-plugin实现相同效果。

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