Azure静态Web应用偶尔忽略staticwebapp.config.json路由配置问题

问题核心 #

你遇到的现象是路由规则仅在隐身模式首次加载或强制刷新时生效，本质是浏览器或Azure边缘节点的缓存导致旧的默认index.html响应被复用，而非路由规则未正确配置。

解决方案 #

1. 调整路由缓存策略 #

更新staticwebapp.config.json，为每个区域路由添加缓存控制头，强制浏览器每次请求都重新获取资源，避免缓存错误页面：

{
    "routes": [
        {
            "route": "/en*",
            "rewrite": "/index.en.html",
            "headers": {
                "Cache-Control": "no-cache, no-store, must-revalidate"
            }
        },
        {
            "route": "/ja*",
            "rewrite": "/index.ja.html",
            "headers": {
                "Cache-Control": "no-cache, no-store, must-revalidate"
            }
        },
        {
            "route": "/zh*",
            "rewrite": "/index.zh.html",
            "headers": {
                "Cache-Control": "no-cache, no-store, must-revalidate"
            }
        },
        // 新增根路径默认路由（可选，根据需求设置默认语言）
        {
            "route": "/*",
            "rewrite": "/index.en.html",
            "headers": {
                "Cache-Control": "no-cache, no-store, must-revalidate"
            }
        }
    ],
    "responseOverrides": {
        "404": {
            "rewrite": "/index.en.html"
        }
    }
}

2. 验证配置部署正确性 #

确认staticwebapp.config.json被正确部署到静态Web应用的根目录：

• 检查Azure门户中静态Web应用的配置页面，确认路由规则已生效；
• 部署后验证dist目录下是否包含该配置文件（AzureStaticWebApp@0任务会自动将指定路径的配置文件复制到输出目录）。

3. 排查前端静态导出逻辑 #

如果你使用SPA框架（如React、Vue）进行静态导出：

• 确保静态导出时生成了独立的index.en.html、index.zh.html等文件，且文件内容正确对应语言版本；
• 禁用客户端路由对区域路径的接管（静态导出模式下无需客户端路由处理路径跳转）。

4. 测试验证 #

• 在普通浏览器中清除缓存后重新访问区域路径，确认路由规则稳定生效；
• 多次刷新页面，检查是否始终返回对应语言的index文件。

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