Azure静态应用部署Angular应用路由首次访问即报错排查

该问题核心是混淆了Azure两类静态托管服务的配置规则，且配置文件作用域、放置位置均错误，和常规Angular路由刷新报错本质是同一类问题，只是触发场景不同：

• 你当前使用的是存储账户自带的「静态网站」功能，该功能原生不识别staticwebapp.config.json、routes.json这类配置文件——上述两个配置是Azure独立产品「Static Web Apps 静态应用服务」的专属配置，存储账户静态网站不会读取这类文件做路由转发。
• Angular作为单页应用，所有路由逻辑由客户端JS执行，当你直接访问非根路径路由时，存储服务收到请求后会直接在$web容器下查找对应路径的物理文件，找不到就直接返回404错误，根本不会把请求转交给index.html加载前端路由。你之前认知的“首次进入正常仅刷新报错”，是指从根路径/进入后通过页面内链接跳转的场景，这类跳转不会发起新的文档请求，自然不会触发存储服务的404；如果是直接输入路由地址访问、硬跳转路由，不管是首次访问还是刷新，都会直接触发报错。
• 你之前将配置文件放在package.json同级但未配置Angular构建资源规则，执行ng build --prod时配置文件根本不会被复制到dist产物目录，就算使用支持该配置的Static Web Apps服务，配置也不会生效。

根据你选择的托管服务二选一即可：

方案1：继续使用存储账户静态网站托管（成本最低，无需换服务） #

该方案不需要上传任何自定义路由配置文件，按以下步骤操作：

1. 先校验上传路径正确性：必须将dist/你的项目名目录下的所有直接子内容（包含index.html、打包后的JS/CSS资源、favicon等）直接上传到$web容器根目录，不要把整个项目名文件夹整体上传，避免index.html处于二级路径无法被访问。
2. 进入存储账户的「静态网站」配置页：
   • 将「默认文档」设置为index.html
   • 将「错误文档路径」也设置为index.html
   • 保存配置后等待1-2分钟生效即可
3. 可选优化：如果需要让真实不存在的静态资源（比如错误的图片、CSS路径）正常返回404状态码，可以在存储账户前绑定Azure CDN，通过CDN规则引擎配置路由转发逻辑：仅当请求路径不属于.js/.css/.png/.jpg等静态资源后缀时，才将请求转发到/index.html，静态资源请求找不到文件时直接返回404。

方案2：改用Azure Static Web Apps服务（支持细粒度路由配置） #

如果你需要用配置文件做路由重定向、权限控制等更复杂的规则，直接使用独立的Azure Static Web Apps服务，不要用存储账户静态网站：

1. 修正配置文件打包规则：打开angular.json文件，找到projects -> 你的项目名 -> architect -> build -> options -> assets配置节点，将staticwebapp.config.json加入assets数组，保证执行ng build --prod时，该文件会被直接复制到dist产物的根目录，和index.html同级。
2. 配置文件使用最简规则即可，你之前写的第三版配置是正确的：

   {
     "navigationFallback": {
       "rewrite": "/index.html"
     }
   }
   

3. 创建Azure Static Web Apps资源，部署时指定dist构建产物目录即可，服务会自动识别根目录下的配置文件，完成所有路由的回退转发。

• 将$web容器设置为Blob匿名访问是静态网站可公开访问的必要前置配置，但和路由回退逻辑无关，无法解决路径找不到的404问题。
• 你写的staticwebapp.config.json格式本身没有严重错误，但存储账户静态网站不识别该配置，且配置文件没有被打包到构建产物目录，双重问题导致配置完全不生效。
• routes.json是Azure Static Web Apps的旧版配置格式，目前已经被staticwebapp.config.json替代，且同样不被存储账户静态网站支持。

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