Flutter Web部署Firebase后路径参数路由出现404问题

问题根源 #

本地运行正常是因为Flutter自带的开发服务器默认支持单页应用路由重写，而Firebase Hosting默认会将带路径的请求（如/username）当作静态资源路径查找对应文件，找不到就返回404。你的Flutter Web属于单页应用，所有路由逻辑由客户端处理，需要让Firebase把所有请求转发到index.html。

解决方案 #

1. 修改firebase.json配置 #

在项目根目录的firebase.json文件中，给hosting节点添加rewrites规则，将所有请求重定向到index.html：

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

2. 重新部署项目 #

修改配置后，执行部署命令让配置生效：

firebase deploy --only hosting

3. 确认路径策略依赖 #

你的代码中已调用setPathUrlStrategy()，确保pubspec.yaml中添加了对应依赖：

dependencies:
  url_strategy: ^0.2.0

并正确导入包：

import 'package:url_strategy/url_strategy.dart';

配置完成后，Firebase Hosting会将所有请求转发到index.html，由Fluro客户端路由处理/username这类带参数的路径，即可解决404问题。

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