能否将多语言Angular应用按路径规则部署到AWS Amplify？

这套Angular多语言独立包分发方案完全可以在AWS Amplify上实现，仅需要调整Amplify内置的重写/重定向规则即可，无需额外接入其他服务。

1. 确认构建产物目录结构 #

首先确保你打包后的多语言包按如下结构存放，上传到Amplify的发布根目录：

发布根目录/
├── index.html（英文版本入口）
├── assets/（英文版本静态资源）
├── favicon.ico
├── cn/
│   ├── index.html（中文版本入口）
│   └── assets/（中文版本静态资源）
├── ru/
│   ├── index.html（俄语版本入口）
│   └── assets/（俄语版本静态资源）
├── fr/
│   ├── index.html（法语版本入口）
│   └── assets/（法语版本静态资源）
└── de/
    ├── index.html（德语版本入口）
    └── assets/（德语版本静态资源）

注意：Angular构建各语言包时要指定对应base href，比如中文包构建命令添加参数 --base-href /cn/，俄语包添加 --base-href /ru/，英文包使用默认的 --base-href /，避免静态资源加载和路由跳转错误。

2. 配置Amplify重写/重定向规则 #

进入Amplify控制台对应应用的「重写和重定向」设置页面，删除默认的全局SPA重定向规则，按优先级从上到下添加以下规则：

• 各语言子路径SPA重定向规则（优先级最高，每个语言配置1条）
  源地址：/cn/<*>
  目标地址：/cn/index.html
  响应类型：200 (重写)
  按同样规则依次添加ru、fr、de的对应配置，替换路径中的语言代码即可。
• 静态资源直通规则
  源地址：/<*>
  目标地址：/{path}
  响应类型：200 (重写)
  匹配条件：选择「匹配文件扩展名」，填写常见静态资源后缀：css|js|png|svg|jpg|jpeg|gif|ico|woff|woff2|ttf|json
• 根路径SPA重定向规则（优先级最低）
  源地址：/<*>
  目标地址：/index.html
  响应类型：200 (重写)

配置完成后等待1-2分钟Amplify自动部署生效，即可按你预设的路径规则访问各语言版本。

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