Contents

构建和发布为 Web 应用

Contents

（例如）在典型的开发过程中，你可以在命令行使用 flutter run -d chrome 命令测试应用程序。这会构建出 debug 版本的应用。

本页面会帮助你构建 release 版本的应用，其囊括了如下主题：

处理 Web 中的图片

Web 支持标准的 Image widget 来显示图片。但是，由于 Web 浏览器需要安全地运行不受信任的代码，因此与移动和桌面平台相比，图像处理方面存在某些限制。

更多信息，请参阅 在 Web 中展示图片.

选择 Web 渲染器

默认情况下，flutter build 和 flutter run 命令对 Web 渲染器使用 auto 参数。这意味着您的应用程序在移动浏览器上会与 HTML 渲染器一起运行，而在桌面浏览器上与 CanvasKit 一起运行。这是我们推荐的组合方式，能够针对每个平台特性优化。

更多信息，请参阅 Web 渲染器.

混淆并压缩代码

当你创建了一个 release 版本时，便已经压缩了代码。

Debug 模式构建的 Web 应用没有被压缩，且 Tree-shaking 没有执行。

Profile 模式构建的 Web 应用没有被压缩，但 Tree-shaking 执行了。

Release 模式构建的 Web 应用被压缩了，并且 Tree-shaking 执行了。

构建用于发布的应用

使用 flutter build web 命令构建应用程序以进行部署。你也可以通过使用 --web-renderer 自行选择渲染方式。（请查看 网页渲染器）这将生成包括资源的应用程序，并将文件放入项目的 /build/web 目录中。

一般的应用程序的 release 版本具有以下结构：

/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

启动 Web 服务器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然后打开 /build/web 目录。在浏览器中访问 localhost:8000（前文用 Python 启动的服务器）以查看应用程序的 release 版本。

将 Flutter 应用内嵌到一个 HTML 页面里

使用 hostElement

** 在 Flutter 3.10 中新增**
你可以使用 flutter.js 和 hostElement 引擎初始化参数将 Flutter Web 应用嵌入到 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

你可以使用 iframe 标签将 Flutter web 应用内嵌到一个网页里。请参照下面的例子，将 URL 替换成实际的地址：

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

部署到 Web 端

等你准备好部署应用时，将 release 包上传到 Firebase、云或者是类似服务上：

PWA Support

从 1.20 版开始，用于 Web 应用程序的 Flutter 模板包括了对可安装且具有离线功能的 PWA 应用程序所需的核心功能的支持。基于 Flutter 的 PWA 的安装方式与其他基于 Web 的 PWA 基本相同；由 manifest.json 提供的配置信息可以声明您的 Flutter 应用程序是 PWA，该文件可以在 web 目录中使用 Flutter create 命令生成。

对 PWA 的支持仍在进行中，因此，如果您发现不正确的地方，欢迎 给予我们反馈。