构建并发布网络应用

内容

构建应用以供发布
部署到网络
部署到 Firebase 托管
- 开始之前
- 初始化 Firebase
在网络上处理图像
选择网络渲染器
缩小
将 Flutter 应用嵌入到 HTML 页面
- hostElement
- Iframe
PWA 支持

在典型的开发周期中，您使用 flutter run -d chrome（例如）在命令行中测试应用。这将构建应用的调试版本。

此页面可帮助您准备应用的发布版本，并涵盖以下主题

构建应用以供发布
部署到网络
部署到 Firebase 托管
在网络上处理图像
选择网络渲染器
缩小

构建应用以供发布

使用 flutter build web 命令构建应用以供部署。您还可以使用 --web-renderer 选项选择要使用的渲染器（请参阅网络渲染器）。这将生成应用（包括资产），并将文件放置到项目的 /build/web 目录中。

简单应用的发布版本具有以下结构

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

启动网络服务器（例如，python -m http.server 8000，或使用 dhttpd 包），然后打开 /build/web 目录。在浏览器中导航到 localhost:8000（以 python SimpleHTTPServer 示例为例）以查看应用的发布版本。

部署到网络

当您准备部署应用时，将发布包上传到 Firebase、云端或类似服务。以下列出了一些可能性，但还有许多其他可能性

部署到 Firebase 托管

你可以使用 Firebase CLI 使用 Firebase 托管构建和发布你的 Flutter 应用。

开始之前

首先，安装或更新 Firebase CLI

npm install -g firebase-tools

初始化 Firebase

启用 Web 框架预览，以使用感知框架的 Firebase CLI
```
 firebase experiments:enable webframeworks
```
在空目录或现有的 Flutter 项目中，运行初始化命令
```
 firebase init hosting
```
当询问你是否要使用 Web 框架时，回答yes。
如果你在空目录中，系统会要求你选择 Web 框架。选择Flutter Web。
选择你的托管源目录；这可以是现有的 Flutter 应用。
选择一个区域来托管你的文件。
选择是否使用 GitHub 设置自动构建和部署。
将应用部署到 Firebase 托管
```
 firebase deploy
```
运行此命令会自动运行flutter build web --release，因此你无需在单独的步骤中构建你的应用。

要了解更多信息，请访问适用于 Web 上的 Flutter 的官方Firebase 托管文档。

在 Web 上处理图像

Web 支持标准的Image 窗口小部件来显示图像。根据设计，Web 浏览器运行不受信任的代码，而不会损害主机计算机。与移动和桌面平台相比，这限制了你对图像的操作。

有关更多信息，请参阅在 Web 上显示图像。

选择 Web 渲染器

默认情况下，flutter build 和 flutter run 命令对 Web 渲染器使用 auto 选项。这意味着你的应用在移动浏览器上使用 HTML 渲染器，在桌面浏览器上使用 CanvasKit。我们建议使用此组合来针对每个平台的特性进行优化。

有关更多信息，请参阅 Web 渲染器。

缩小

当你创建发布版本时，缩小将为你处理。

Web 应用构建类型	代码已缩小？	已执行树摇晃？
调试	否	否
概要	否	是
发布	是	是

将 Flutter 应用嵌入 HTML 页面

`hostElement`

在 Flutter 3.10 中添加
你可以使用 flutter.js 和 hostElement 引擎初始化参数，将 Flutter Web 应用嵌入到网页的任何 HTML 元素中。

若要告诉 Flutter Web 在哪个元素中渲染，请使用 initializeEngine 函数的 hostElement 参数

<html>
  <head>
    <!-- ... -->
    <script src="flutter.js" defer></script>
  </head>
  <body>

    <!-- Ensure your flutter target is present on the page... -->
    <div id="flutter_host">Loading...</div>

    <script>
      window.addEventListener("load", function (ev) {
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function(engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              // Pass a reference to "div#flutter_host" into the Flutter engine.
              hostElement: document.querySelector("#flutter_host")
            });
            await appRunner.runApp();
          }
        });
      });
    </script>
  </body>
</html>

要了解详情，请查看自定义 Web 应用初始化。

Iframe

你可以像嵌入其他内容一样，将 Flutter Web 应用嵌入到 HTML 文件的 iframe 标签中。在以下示例中，用“URL”替换你的 HTML 页面的位置

<iframe src="URL"></iframe>

PWA 支持

从 1.20 版本开始，用于 Web 应用的 Flutter 模板包括对可安装、可离线 PWA 应用所需的核心功能的支持。基于 Flutter 的 PWA 可以像任何其他基于 Web 的 PWA 一样进行安装；表示你的 Flutter 应用是 PWA 的设置由 manifest.json 提供，该文件由 flutter create 在 web 目录中生成。

PWA 支持仍处于开发中，因此如果您发现任何不妥之处，请向我们提供反馈。