React Azure静态Web Apps的staticwebapp.config.json未被识别问题

我的staticwebapp.config.json配置如下：

{  
  "navigationFallback": {     
    "rewrite": "/index.html",     
    "exclude": ["*.{css,scss,js,png,gif.ico,jpg,svg}"]  
  }
}

我将文件放在项目根目录（与package.json同级），请问这个存放路径是否正确？目前配置未被识别，比如/login路由返回404错误。另外我是否必须使用AzureStaticWebApp@0任务构建React应用才能让配置生效？还有，在Azure门户的“Configuration”页面尝试勾选“Enable configuration file changes”时，勾选后保存按钮仍处于禁用状态，刷新页面后选项也没被选中，这该怎么解决？

1. 配置文件路径是否正确？ #

staticwebapp.config.json的正确存放位置就是项目根目录（和package.json同级），从你描述的位置来看是对的。但要注意：部署时必须保证这个文件被同步到构建输出目录的根路径。比如React项目默认构建后文件会输出到build文件夹，如果你的构建脚本没有把staticwebapp.config.json复制到build目录，部署后就会缺失配置文件，导致路由规则不生效。

2. 是否必须用AzureStaticWebApp@0任务构建？ #

不是必须，但这个任务是Azure DevOps部署Static Web Apps的官方推荐方案，它会自动处理构建输出与配置文件的同步。如果用其他方式部署（比如手动上传、GitHub Actions），只要满足两个条件即可：

• 构建后的输出目录里包含staticwebapp.config.json
• 部署时将整个输出目录（含配置文件）完整上传到Static Web Apps

React项目可以在package.json的build脚本里加个复制命令，确保配置文件被同步：

"scripts": {
  "build": "react-scripts build && cp staticwebapp.config.json build/"
}

（Windows环境把cp换成copy即可）

3. 门户“Enable configuration file changes”无法保存的问题 #

这个选项生效有几个前提：

• 你的Static Web Apps实例必须是标准层（免费层不支持通过配置文件修改部分设置）
• 你需要拥有该资源的所有者/参与者权限，只读权限无法修改配置
• 可以先清浏览器缓存或换个浏览器重试，大概率是门户前端缓存导致的异常

如果以上都满足还是不行，直接用Azure CLI命令来启用：

az staticwebapp update --name <你的应用名称> --resource-group <资源组名称> --allow-config-file-update true

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