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
相关产品推荐
相关产品推荐

