如何解决Angular 15 i18n应用部署Azure静态Web应用路由刷新空白问题

你的问题出在路由重写和导航回退规则的配置上，当前规则未正确适配Angular SPA的子路由刷新场景。以下是修改后的staticwebapp.config.json配置：

{
  "trailingSlash": "auto",
  "routes": [
    {
      "route": "/",
      "rewrite": "/en/index.html"
    },
    {
      "route": "index.html",
      "rewrite": "/en/index.html"
    },
    {
      "route": "/en/*",
      "rewrite": "/en/index.html"
    },
    {
      "route": "/es/*",
      "rewrite": "/es/index.html"
    }
  ],
  "navigationFallback": {
    "rewrite": "/en/index.html",
    "exclude": [
      "/*.css",
      "/*.js",
      "/*.png",
      "/*.jpg",
      "/*.svg",
      "/*.ico"
    ]
  }
}

关键调整说明： #

• 语言子路由重写：将/en/*和/es/*的重写目标从/en/、/es/改为/en/index.html、/es/index.html，确保所有子路由请求（如/en/profile）都直接指向对应语言的SPA入口文件，让Angular路由系统接管后续解析。
• 导航回退规则优化：移除原配置中排除语言路径的规则，改为排除静态资源文件（CSS、JS、图片等）。非静态资源的请求会触发导航回退，默认回退到英文入口；而语言子路由请求会被前面的路由规则优先匹配，指向对应语言的入口。

该配置既保留了默认跳转英文的功能，又解决了子路由刷新空白的问题，完全适配Angular i18n的多语言目录结构。

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