Flutter Web自定义URL路由部署Firebase Hosting后刷新404如何解决？

问题原因 #

这个是单页应用（SPA）部署到静态托管服务的典型问题：你用了url_strategy去掉了URL里的#后，所有路由跳转都是客户端侧由Flutter的GetX框架处理，服务器侧并没有对应/LoginPage、/HomePage这类路径的真实静态文件。Firebase Hosting默认收到路径请求后会直接查找对应静态文件，找不到就返回404，不会把请求交给你打包出来的index.html（也就是你的Flutter应用入口）处理。

解决步骤 #

1. 找到你的Flutter项目根目录下的Firebase配置文件firebase.json
2. 在hosting配置节点下添加重写规则，将所有路径请求都重定向到入口文件index.html，交由Flutter侧处理路由匹配，示例配置如下：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

注意：public字段的值需要和你Flutter Web打包产物的输出路径对应，默认就是build/web，如果你没有自定义打包路径无需修改。

3. 保存修改后的配置文件，重新执行firebase deploy部署即可生效。

配置完成后刷新任意路由路径，Firebase都会先返回你的Flutter应用入口，再由GetX匹配对应的路由页面，你之前配置的自定义未知路由页面逻辑也会正常生效。

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