Azure静态Web Apps中Angular路由重定向配置问题排查

你的问题出在staticwebapp.config.json的规则语法不符合Azure静态Web Apps的要求，以下是针对性修正：

1. 路径参数语法修正 #

Azure静态Web Apps使用{参数名}格式匹配动态路径参数，而非Angular路由的:参数名。把第二条规则里的:filepath替换成{filepath}，目标路径同步使用{filepath}引用参数：

{
  "route": "/old-files/{filepath}",
  "redirect": "/new-files/{filepath}",
  "statusCode": 301
}

2. ID参数规则匹配校验 #

第三条带{id}的规则，要保证原路径结构完全匹配，参数名必须前后一致，同时注意路径斜杠的完整性。比如原路径是/old-detail/123，规则要写成：

{
  "route": "/old-detail/{id}",
  "redirect": "/new-detail/{id}",
  "statusCode": 301
}

3. .aspx通配符重定向的正确写法 #

针对所有.aspx结尾的路径，需要用正则匹配模式来实现。正则规则里用捕获组提取.aspx前的内容，再在目标路径中引用：

{
  "route": "/(.*)\\.aspx",
  "redirect": "/{1}",
  "statusCode": 301
}

这个规则会把/about.aspx重定向到/about，/product/123.aspx重定向到/product/123。

关键注意事项 #

• 规则顺序：Azure会按数组顺序匹配路由，把固定路径规则（比如你的第一条）放在最前面，通配符/正则规则放在后面，避免被提前拦截。
• 文件位置：确保staticwebapp.config.json放在Angular项目的src目录下，并且在angular.json的assets配置中包含该文件，保证构建后能被复制到dist根目录：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/staticwebapp.config.json"
  ]
  

• 验证部署：部署后可以通过浏览器开发者工具查看网络请求的301状态码，或者在Azure门户的静态Web Apps配置页查看路由规则是否正确加载。

完整配置示例 #

{
  "routes": [
    {
      "route": "/old-route/page/",
      "redirect": "/new-route/page/",
      "statusCode": 301
    },
    {
      "route": "/old-files/{filepath}",
      "redirect": "/new-files/{filepath}",
      "statusCode": 301
    },
    {
      "route": "/old-detail/{id}",
      "redirect": "/new-detail/{id}",
      "statusCode": 301
    },
    {
      "route": "/(.*)\\.aspx",
      "redirect": "/{1}",
      "statusCode": 301
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

内容的提问来源于stack exchange，提问作者M.bo.yazan