Angular 13如何为静态资源配置独立域名？动态构建替换地址

由于--deploy-url已被Angular官方废弃，现在可以通过--assets-base-href参数实现静态资源的独立域名配置，具体操作如下：

命令行动态构建方式 #

直接在构建命令中指定主站基础路径和资源域名：

ng build --base-href https://example.com/ --assets-base-href https://assets.example.com/

• --base-href：设置应用的基础路径，对应index.html里的<base href>标签，保障主站路由和页面引用正常
• --assets-base-href：专门为静态资源指定独立的基础域名，Angular会自动将所有/assets/开头的资源引用（包括HTML中的<img>、CSS中的background-image: url()等）替换为该域名拼接原路径的形式，比如把<img src="/assets/img.png"/>转换成<img src="https://assets.example.com/assets/img.png"/>

配置文件默认值设置 #

如果不想每次构建都输入命令行参数，可以在angular.json中配置默认值：
找到项目的build配置节点（projects -> [你的项目名] -> architect -> build -> options），添加以下配置：

{
  "baseHref": "https://example.com/",
  "assetsBaseHref": "https://assets.example.com/"
}

后续直接执行ng build就会使用这些默认值，需要修改时用命令行参数覆盖即可。

注意事项 #

• 确保--base-href和--assets-base-href的值结尾带有斜杠，避免路径拼接出现错误
• 该方案会自动处理所有Angular打包时识别的静态资源，包括HTML、CSS、TypeScript中通过相对路径引用的assets资源

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