如何使用 Firebase 托管在 Flutter 中设置 404 Not found 页面答案

【问题标题】：how to setup 404 Not found page in Flutter using Firebase Hosting如何使用 Firebase 托管在 Flutter 中设置 404 Not found 页面
【发布时间】：2021-10-17 18:54:46
【问题描述】：

我正在尝试使用 Flutter 在我的网站中显示自定义的 404 未找到页面。

我正在使用以下代码：

MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: "/",
        routes: {
          "/": (context) => Scaffold(),
          "/test": (context) => TestPage()
        },
        onUnknownRoute: (settings) {
          return MaterialPageRoute(builder: (_) => Scaffold(
            body: Center(
              child: Text("Page not found !"),
            ),
          ));
        },

我已重建我的应用并使用 Firebase 托管进行部署。但是，如果我输入错误的网址，我会看到这个：

由于我使用的是颤振，我真的不想像它所说的那样添加一个 .html 文件，即使它有效。
我宁愿显示一个内置 dart 的自定义页面。

在这种情况下如何显示我的自定义“找不到页面”？

编辑：

这是我当前的firebase.json 文件：

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

我试过什么没用：

没有重写
进行重写，希望 Flutter 路由能够领先
在本地测试项目
根据documentation将Flutter路由策略从URL改为PATH

最后：

我网站中的现有页面运行良好
所有错误的 url 都被重定向到 /index.html

唯一有效的是：

在我的 /build/web 文件夹中添加 404.html 文件
删除firebase.json 中的重写

但这不是我想要的，我想显示我的 not_found_page.dart。

这可能是一个 Flutter 问题，我在此期间保持开放，但我会更深入地研究 Flutter 方面。

【问题讨论】：

尝试使用其他设备...可能会缓存旧版本。如果可能的话，您能否分享 URL，以便这里的任何人都可以测试它？
我已经在 Chrome 和 Safari 上进行了测试，在第一台 :/ 和另一台计算机上都清除了缓存

标签： firebase flutter dart firebase-hosting

【解决方案1】：

只需在您的根目录中添加一个 404.html 页面并将其重定向到您自己的自定义颤振构建页面。你也可以学会处理

'找不到著名的 404 页面！'来自here

【讨论】：

我试过了，但不幸的是还是不行
您需要修改用于托管的 Firebase json 规则以支持该规则
“我已经尝试过了，但不幸的是仍然无法正常工作”请编辑您的问题以显示您所做的事情。
我已经用我所有的测试和结果编辑了这个问题，@austin 的“将它重定向到你自己的自定义颤振构建页面”是什么意思？请问我该怎么做？
非常好的文章，我可能会用它来隐藏“#”符号而不切换回PathUrlStrategy（默认情况下隐藏#）。我还在 Flutter 存储库中创建了一个关于它的问题，告诉它它阻止了对 onUnknownRoute 的调用。

【解决方案2】：

问题确实出在 Flutter 方面。我使用“/”作为initialRoute 和“/”作为另一个路由，这显然会造成冲突，实际上在我的代码中没有用，因为返回的第一页是在MaterialApp 的child 下定义的。

Flutter 将我的路由重定向到 "/" 而不是调用 onUnknownRoute，并且与 firebase.json 中的重写存在冲突

所以我从routes 地图中删除了"/": (context) => Scaffold(),。我还删除了 firebase.json 中的 rewrites 以使其正常工作。

我还设置了URL 策略，以上所有步骤都不适用于PATH 策略。

编辑：我发现只有在 MaterialApp 小部件上没有 home 属性时，PATH 策略才能起作用。
如果是这样，所有错误的路由将被重定向到home，而不是调用onUnknownRoute

对于 / 路由，如果非 null，则使用 home 属性。

否则，如果路由表有路由条目，则使用路由表。

否则，将调用 onGenerateRoute（如果提供）。对于未由 home 和 routes 处理的任何有效路由，它应该返回一个非空值。

最后，如果所有其他方法都失败，则调用 onUnknownRoute。

PS：不需要实现404.html文件

【讨论】：