如何通过Firebase Hosting重定向为Flutter Web路径添加/#/前缀？

一、服务器端重定向实现（推荐方案） #

因为用户请求www.example.com/profiles/user1会先到达服务器，直接在服务器层面配置重定向规则是最可靠的方式：

1. Nginx 配置示例 #

在Nginx的server配置块中添加规则：

location ~ ^/profiles/(.*)$ {
    return 302 /#/profiles/$1;
}

该规则会匹配所有以/profiles/开头的请求，自动重定向到带#的对应Flutter路由路径。

2. Apache 配置示例 #

在项目根目录的.htaccess文件中添加：

RewriteEngine On
RewriteRule ^profiles/(.*)$ /#/profiles/$1 [R=302,L]

二、客户端脚本 fallback 方案（无服务器配置权限时用） #

如果无法修改服务器配置，可以在Flutter Web的web/index.html中添加JavaScript脚本处理：
在body标签末尾插入以下代码：

window.addEventListener('load', function() {
    const currentPath = window.location.pathname;
    // 排除根路径和已带#的路由
    if (currentPath !== '/' && !currentPath.startsWith('/#/')) {
        window.location.href = '/#/' + currentPath.slice(1);
    }
});

页面加载时，脚本会自动检查当前路径，若为非Flutter路由格式，就跳转到带#的对应地址。

三、Flutter路由层面兼容处理 #

配合服务器的fallback配置（将所有请求转发到index.html），可以在Flutter内部处理路径：

MaterialApp(
  onGenerateRoute: (settings) {
    final routePath = settings.name;
    if (routePath != null && routePath.startsWith('/profiles/')) {
      // 提取用户ID并跳转对应页面
      final userId = routePath.split('/')[2];
      return MaterialPageRoute(
        builder: (context) => ProfilePage(userId: userId),
      );
    }
    // 其他路由逻辑
    return MaterialPageRoute(builder: (context) => HomePage());
  },
);

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