如何将 Flutter Web 应用程序部署到 Firebase 上托管的现有网站？
How can I deploy a flutter web application to an existing website hosted on Firebase?
我已经使用 Firebase 托管在 www.example.com（自定义域）托管了一个网站。我已经在网站上有多个 HTML 页面，例如 example.com/page-1.html 或 example.com/page-2.html。
现在我需要构建一个 Web 应用程序 example-web 并将其放在现有站点的一个页面中。假设 example.com/page-3 应该只加载 Flutter Web 应用程序。我不希望我现有的 HTML 页面发生变化或受到 Flutter 单页 Web 应用程序的影响。
一些注意事项：
- 我已经有 iOS 和 Android 应用程序使用与
example.com 上托管的站点相同的 Firebase 项目构建。这些移动应用程序也是使用 Flutter 创建的。
- 我在同一个项目中使用 Flutter 和 Firebase 创建了一个示例 Web 应用程序。
- 我需要它在同一个域中，因为我已经设置了 Firebase 托管来读取变量，然后使用该变量加载 Flutter Web 应用程序。例如
example.com/profile/username 需要在读取变量 username. 后加载 flutter web 应用程序
- 我只是对如何在现有的 Firebase 托管网站中加载 Flutter Web App 构建感到困惑？
- 我应该在不同的主机中托管 flutter web 应用程序 link 并将其加载到我现有域页面的 iFrame 中吗？
非常感谢对此的任何帮助或指导！谢谢！
当您在项目目录中 运行 flutter build web 时，Flutter 会自动创建一个 index.html 文件及其所有依赖项，因此提供 Flutter Web 应用程序与提供服务没有太大区别一个普通的页面。您需要的所有文件最终都将位于您项目的 /build/web 文件夹中，该文件夹可以在 example.com/page-3.
中单独提供
您只需将 Flutter 生成的所有文件粘贴到您的 Firebase 主机的 public 目录中。请按照以下步骤操作：
1. 运行 颤振构建：
flutter build web
它将生成 build/web 目录，其内容可能类似于：
2。复制 public 目录中的构建文件：
如果您已经有一个 Firebase 托管项目，那么我假设您的 public 目录类似于：
将所有文件从 Flutter 构建目录复制到 public 目录后，它应该如下所示：
请注意，我已将 index.html 从 Flutter 重命名为 page-3.html 并保持原来的 index.html 不变。
page-3.html 文件将在同一目录中查找 main.dart.js 文件，因此如果您将该 JS 文件移动到任何其他目录，比方说，/js/main.dart.js 然后不要忘记在 page-3.html.
中更改它
3。服务网站：
尝试使用 firebase serve --only hosting 命令在本地为您的网站提供服务。
您应该让所有现有页面和 Flutter 应用保持原样 http://localhost:3000/page-3.html。如果 /page-3 上的页面 returns 404 但在 /page-3.html 上有效，则在 .
上查看此答案
PS: 确保 none 的同名文件相互覆盖。
使用 Firebase multisite hosting 保留您当前的站点，您可以在 app.example.com.
上设置和部署您的 flutter 应用程序
您需要将用户引导至该应用程序 url 才能使用该应用程序。
两个站点需要在同一个项目中，如果您使用 Firebase 身份验证，这将跨站点工作。
我已经使用 Firebase 托管在 www.example.com（自定义域）托管了一个网站。我已经在网站上有多个 HTML 页面，例如 example.com/page-1.html 或 example.com/page-2.html。
现在我需要构建一个 Web 应用程序 example-web 并将其放在现有站点的一个页面中。假设 example.com/page-3 应该只加载 Flutter Web 应用程序。我不希望我现有的 HTML 页面发生变化或受到 Flutter 单页 Web 应用程序的影响。
一些注意事项：
- 我已经有 iOS 和 Android 应用程序使用与
example.com上托管的站点相同的 Firebase 项目构建。这些移动应用程序也是使用 Flutter 创建的。 - 我在同一个项目中使用 Flutter 和 Firebase 创建了一个示例 Web 应用程序。
- 我需要它在同一个域中，因为我已经设置了 Firebase 托管来读取变量，然后使用该变量加载 Flutter Web 应用程序。例如
example.com/profile/username需要在读取变量username. 后加载 flutter web 应用程序
- 我只是对如何在现有的 Firebase 托管网站中加载 Flutter Web App 构建感到困惑？
- 我应该在不同的主机中托管 flutter web 应用程序 link 并将其加载到我现有域页面的 iFrame 中吗？
非常感谢对此的任何帮助或指导！谢谢！
当您在项目目录中 运行 flutter build web 时，Flutter 会自动创建一个 index.html 文件及其所有依赖项，因此提供 Flutter Web 应用程序与提供服务没有太大区别一个普通的页面。您需要的所有文件最终都将位于您项目的 /build/web 文件夹中，该文件夹可以在 example.com/page-3.
您只需将 Flutter 生成的所有文件粘贴到您的 Firebase 主机的 public 目录中。请按照以下步骤操作：
1. 运行 颤振构建：
flutter build web
它将生成 build/web 目录，其内容可能类似于：
2。复制 public 目录中的构建文件： 如果您已经有一个 Firebase 托管项目，那么我假设您的 public 目录类似于：
将所有文件从 Flutter 构建目录复制到 public 目录后，它应该如下所示：
请注意，我已将 index.html 从 Flutter 重命名为 page-3.html 并保持原来的 index.html 不变。
page-3.html 文件将在同一目录中查找 main.dart.js 文件，因此如果您将该 JS 文件移动到任何其他目录，比方说，/js/main.dart.js 然后不要忘记在 page-3.html.
3。服务网站：
尝试使用 firebase serve --only hosting 命令在本地为您的网站提供服务。
您应该让所有现有页面和 Flutter 应用保持原样 http://localhost:3000/page-3.html。如果 /page-3 上的页面 returns 404 但在 /page-3.html 上有效，则在
PS: 确保 none 的同名文件相互覆盖。
使用 Firebase multisite hosting 保留您当前的站点，您可以在 app.example.com.
您需要将用户引导至该应用程序 url 才能使用该应用程序。
两个站点需要在同一个项目中，如果您使用 Firebase 身份验证，这将跨站点工作。