如何执行ng build时不覆盖目标构建文件夹的assets目录

问题概述 #

本地Nginx前端运行目录product存放Angular构建产物，执行ng build时源码assets会覆盖该目录下的assets（含用户通过管理面板修改的i18n翻译等内容），此前三种配置尝试均失败：

• 将dev配置的assets设为空数组，构建后assets目录直接消失
• 配置assets为../../../product/assets，报错要求路径以源码根目录开头
• 配置glob规则，构建后assets目录仍不存在

环境：Angular 13.2.3、Node 14.15.1、Windows win32 x64

可行解决方案 #

方案1：构建后脚本保留assets #

1. 修改angular.json，将assets配置为仅包含源码中无需用户修改的资源（无相关资源则设为空数组），避免构建时生成新的assets覆盖原有内容。
2. 在package.json的scripts中添加构建后校验脚本：

   "scripts": {
     "build": "ng build && npm run preserve-assets",
     "preserve-assets": "if not exist product\\assets mkdir product\\assets"
   }
   

   若源码有部分需同步的固定资源（如图标），可通过xcopy选择性复制：

   "preserve-assets": "xcopy src\\assets\\icons product\\assets\\icons /E /Y && if not exist product\\assets\\i18n mkdir product\\assets\\i18n"
   

方案2：反向同步现有assets到构建输出 #

修改angular.json的architect.build.options.assets，添加规则将product/assets的内容同步到构建输出（注意路径需相对于源码根目录，假设源码目录与product同级）：

"assets": [
  {
    "glob": "**/*",
    "input": "../product/assets",
    "output": "./assets/"
  },
  // 按需添加源码中需同步的固定资源
  {
    "glob": "**/*",
    "input": "src/assets/static",
    "output": "./assets/static/"
  }
]

构建时Angular会先复制用户修改后的product/assets内容，再同步源码指定资源，既保留用户数据又更新必要资源。

方案3：中间目录中转+选择性复制 #

1. 修改angular.json的outputPath为临时目录dist-temp，正常配置源码assets。
2. 在package.json添加同步脚本，排除assets目录复制到product：

   "scripts": {
     "build": "ng build && npm run sync-to-product",
     "sync-to-product": "xcopy dist-temp\\* product\\* /E /Y /EXCLUDE:exclude-list.txt"
   }
   

3. 创建exclude-list.txt文件，写入排除规则：

   assets\
   

   此方式通过中转目录避免直接覆盖，仅同步除assets外的所有构建产物。

验证要点 #

执行npm run build后检查：

• product/assets下用户修改的内容完整保留
• 源码指定的固定资源已更新
• JS、CSS、HTML等构建产物正常覆盖

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