You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Firebase托管Flutter Web深度/动态链接失效 直接访问路由报404

问题背景

项目使用go_router包实现深度链接功能:

  • 本地localhost环境运行完全符合预期:页面跳转时浏览器地址栏会同步更新对应路由
  • 部署到Firebase托管的正式发布环境后,站内跳转触发的地址栏更新表现正常
异常现象

部署后存在两类稳定复现的异常:

  • 新建浏览器标签页,直接输入携带特定页面路径的网站地址访问时,会跳转到Firebase默认404错误页面
  • 新建浏览器标签页先打开网站首页,待页面加载完成后手动修改地址栏的路由路径访问,同样返回Firebase默认404错误页
问题根因

该问题是Firebase托管默认路由匹配规则与单页应用前端路由逻辑不兼容导致:
Firebase托管默认会按照请求路径查找服务器上的实体静态文件,直接访问子路径、手动修改地址栏触发请求时,服务器不存在对应路径的静态文件,就会返回默认404页面。而站内跳转是go_router在客户端侧完成的路由切换,不会触发服务器侧的文件匹配请求,因此表现正常。

修复方案

在项目根目录的Firebase托管配置文件firebase.json中添加重写规则,将所有未匹配到静态文件的请求统一转发到Web应用入口index.html,交由前端路由处理,配置示例如下:

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

配置说明:public字段需替换为你项目实际的Flutter Web构建产物输出目录,标准Flutter项目默认值为build/web。

配置修改完成后,在项目根目录执行firebase deploy --only hosting命令重新部署到Firebase托管,配置生效后问题即可解决。

内容的提问来源于stack exchange,提问作者Delwinn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 15:33:18