Angular10+ 一次生产构建部署至多站点（含子目录）的方案咨询

解决方案 #

1. 单构建包适配多站点子目录部署 #

你当前用.作为基准路径的方案完全可用，在此基础上固化构建配置即可：

• 方式一：构建时传入固定参数，执行命令 ng build --base-href ./ --deploy-url ./，两个参数搭配使用可让所有资源的加载逻辑完全基于页面实际部署的路径，不需要为不同站点单独构建。
• 方式二：把配置固化到angular.json，在对应项目的build > options节点下添加如下配置，后续直接执行ng build即可生成通用制品：

"baseHref": "./",
"deployUrl": "./"

2. 禁止assets资源被复制到根目录 #

该问题是Angular CLI处理样式文件内相对路径资源的默认逻辑导致的，可通过以下配置修复：

• 首先确认angular.json中build > options下的assets配置为标准格式：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

• 修改样式文件中资源的引用方式：所有引用assets下的资源统一使用~src/assets/资源路径的格式，~前缀会让CLI按照项目根目录解析路径，不会触发资源哈希重命名、复制到根目录的逻辑。如果使用SCSS可将该前缀定义为全局变量，减少重复代码。
• 兜底配置：如果希望完全规避资源输出到根目录的问题，可在build > options节点新增配置"resourcesOutputPath": "assets"，强制所有CLI处理的静态资源都输出到dist目录下的assets文件夹，从根源上避免资源散列到根目录。

效果验证 #

构建后检查dist目录：所有字体、图片资源均存放在assets目录下，根目录无多余哈希命名的资源文件；部署到任意层级子目录的站点，所有资源加载路径均为相对当前页面的路径，无404问题。

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