如何配置@angular/localize实现静态托管多语言站点部署

不需要自定义文件复制的hack脚本，Angular CLI 原生支持自定义各语言版本的构建输出规则，完全适配无重写能力的纯静态托管场景，配置步骤如下：

1. 配置 angular.json 多语言构建规则 #

在项目的 angular.json 配置文件中，先定义好所有支持的语言规则，核心是给源语言和其他语言分别设置对应的 baseHref 和输出路径：

• 源语言（英文 en-US）：baseHref 设为根路径 /，构建产物直接输出到 dist 根目录
• 其他语言（法语 fr、西班牙语 es 等）：baseHref 设为对应语言子路径 /<语言代码>/，构建产物自动输出到 dist 下对应语言代码的子目录

配置示例如下：

{
  "projects": {
    "your-app-name": {
      "i18n": {
        "sourceLocale": {
          "code": "en-US",
          "baseHref": "/"
        },
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": "/fr/"
          },
          "es": {
            "translation": "src/locale/messages.es.xlf",
            "baseHref": "/es/"
          }
        }
      },
      "architect": {
        "build": {
          "options": {
            "localize": true,
            "outputPath": "dist/application",
            // 其余常规构建配置保持不变，如index、main、polyfills、assets等配置
          },
          "configurations": {
            "production": {
              // 生产环境原有配置保持不变，不要覆盖localize、baseHref相关设置
            }
          }
        }
      }
    }
  }
}

配置后执行构建时，Angular CLI 会自动按规则输出文件：源语言文件直接放在dist/application根目录，其余语言文件自动放在dist/application/fr、dist/application/es这类对应子目录下，完全不需要手动复制。

2. 简化构建脚本 #

把 package.json 里带复制命令的临时脚本替换为标准构建命令即可：

{
  "scripts": {
    // 其余脚本保持不变
    "build": "ng build --configuration=production"
  }
}

3. 静态托管配置说明 #

构建完成后直接把dist/application目录下的所有文件上传到静态托管服务即可，最终访问效果完全符合预期：

• 访问域名根路径直接加载英文版本站点
• 访问/fr路径加载法语版本站点
• 访问/es路径加载西班牙语版本站点

注意：如果你的静态托管服务需要手动配置首页回退规则，给根目录和每个语言子目录都配置index.html作为默认首页即可。所有资源引用路径、Angular 路由基准路径已经在构建时根据各语言的baseHref自动处理完成，不会出现资源404、路由跳转错误的问题。

方案优势 #

对比手动复制文件的临时方案，原生配置有几个明显好处：

• 完全为框架原生支持，后续升级Angular版本不会出现兼容问题
• 构建阶段自动处理所有路径关联逻辑，避免手动复制可能引发的资源引用、路由匹配错误
• 后续新增语言只需要在i18n.locales节点下追加对应语言配置即可，不需要修改构建脚本

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