Angular 9：如何在architect构建选项中本地化deployUrl

问题分析 #

使用 ng build --prod --localize 构建多语言应用时，Angular 会自动为 baseHref 追加语言目录（如 /app/en/），但全局配置的 deployUrl 不会自动关联本地化目录，导致 CSS、JS 等资源的路径仍指向 /app/，无法正确加载对应语言目录下的资源。

解决方案 #

方案一：移除全局 deployUrl，仅依赖 baseHref #

如果你的应用资源和代码部署在同一路径下，无需单独配置 deployUrl，Angular 会基于 baseHref 自动解析资源路径。

修改 angular.json 中 projects/{app-name}/architect/build/options：

"baseHref": "/app/",
// 删除这一行："deployUrl": "/app/",

重新构建后，资源路径会自动继承 baseHref 追加的语言目录，例如 /app/en/styles.3f60016a42d1eacbb401.css。

方案二：为每个 locale 配置专属 deployUrl #

在 angular.json 中为每种语言单独创建构建配置，指定对应的 deployUrl：

1. 在 projects/{app-name}/architect/build/configurations 下添加语言配置：

"en": {
  "localize": ["en"],
  "deployUrl": "/app/en/"
},
"hu": {
  "localize": ["hu"],
  "deployUrl": "/app/hu/"
}

2. 执行构建命令：

ng build --prod --configuration=en,hu

此方式会为每种语言使用对应的 deployUrl，确保资源路径正确指向语言目录。

方案三：命令行动态指定 deployUrl（适合自动化脚本） #

通过命令行分别为每种语言构建，手动传递对应的 deployUrl：

# 构建英文版本
ng build --prod --localize=en --deploy-url=/app/en/
# 构建匈牙利语版本
ng build --prod --localize=hu --deploy-url=/app/hu/

两次构建会分别生成 en 和 hu 目录，资源路径自动匹配对应语言前缀。

补充说明 #

Angular 10+ 版本中 deployUrl 已被标记为废弃，官方推荐仅使用 baseHref 或通过 assets 配置管理资源路径，若后续升级框架，建议逐步迁移至该方式。

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