Firebase 托管 - 额外 .html 页面的 Flutter Web 应用托管答案

【问题标题】：Firebase Hosting - Flutter Web App hosting of extra .html pageFirebase 托管 - 额外 .html 页面的 Flutter Web 应用托管
【发布时间】：2020-09-11 18:13:01
【问题描述】：

我目前正在开发一个托管在 Firebase 上的 Flutter Web 应用。该网络应用程序为用户提供了图像上传功能，该功能使用位于资产文件夹中的另一个 HTML 页面（这样做是因为我在此页面上使用了一些 JS 库 - 我没有为 dart 找到这些库）。这个 html 页面在一个额外的窗口中从 dart 调用 - 在本地这工作正常 - 我只是在 localhost/assets/html/uploadImage.html 打开页面并出现窗口。但是，这在 Firebase 上托管时不起作用。我在这里打电话 /assets/html/uploadImage.html - 但只是得到一个空白页。我有点理解静态文件在 Firebase 上的托管方式与在本地托管的方式不同——但我不明白我在这里做错了什么。是否有一些可配置的东西来托管这个额外的页面？

很高兴听到你的想法！

【问题讨论】：

标签： firebase flutter dart firebase-hosting flutter-web

【解决方案1】：

仅限 Flutter Web / Firebase 托管

如果您尝试为 Flutter Web 提供静态 HTML 文件，您可以将它们放在 web 构建文件夹中。

您还需要调整您的firebase hosting rewrite rules，以便您的应用不会自动从静态 html 文件重定向回应用。

以下示例将允许用户访问您的 app.com/example/staticwebpage.html 而不会被重定向回 Flutter 应用。

  "rewrites": [
    {
      "source": "/example/staticwebpage.html",
      "destination": "/example/staticwebpage.html",
    },
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]

在 Flutter iOS 和 Android 上提供 HTML

如果您需要在 iOS 和 Android Flutter 应用程序上提供 HTML 文件，您将需要使用这些软件包之一。他们将在应用内网络浏览器中提供页面。

【讨论】：

【解决方案2】：

另一种方法是将 html 添加到 web 文件夹并从那里启动它，这样当您启动它时，您将拥有 yourdomain.web.app/my.html

【讨论】：