构建和发布为 Web 应用

构建用于发布的应用
Deploying to the web
Deploying to Firebase Hosting
- Before you begin
- Initialize Firebase
Handling images on the web
Choosing a web renderer
Minification
将 Flutter 应用内嵌到一个 HTML 页面里
- 使用 hostElement
- Iframe
PWA Support

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

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

构建正式版本的应用
部署应用到 Web
部署到 Firebase 主机
处理 Web 中的图片
选择 Web 渲染器
压缩

构建用于发布的应用

使用 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 版本。

Deploying to the web

When you are ready to deploy your app, upload the release bundle to Firebase, the cloud, or a similar service. Here are a few possibilities, but there are many others:

Deploying to Firebase Hosting

You can use the Firebase CLI to build and release your Flutter app with Firebase Hosting.

Before you begin

To get started, install or update the Firebase CLI:

npm install -g firebase-tools

Initialize Firebase

Enable the web frameworks preview to the Firebase framework-aware CLI:
```
 firebase experiments:enable webframeworks
```
In an empty directory or an existing Flutter project, run the initialization command:
```
 firebase init hosting
```
Answer yes when asked if you want to use a web framework.
If you’re in an empty directory, you’ll be asked to choose your web framework. Choose Flutter Web.
Choose your hosting source directory; this could be an existing flutter app.
Select a region to host your files.
Choose whether to set up automatic builds and deploys with GitHub.
Deploy the app to Firebase Hosting:
```
 firebase deploy
```
Running this command automatically runs flutter build web --release, so you don’t have to build your app in a separate step.

To learn more, visit the official Firebase Hosting documentation for Flutter on the web.

Handling images on the web

The web supports the standard Image widget to display images. By design, web browsers run untrusted code without harming the host computer. This limits what you can do with images compared to mobile and desktop platforms.

For more information, see Displaying images on the web.

Choosing a web renderer

By default, the flutter build and flutter run commands use the auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. We recommend this combination to optimize for the characteristics of each platform.

For more information, see Web renderers.

Minification

Minification is handled for you when you create a release build.

Type of web app build	Code minified?	Tree shaking performed?
debug	No	No
profile	No	Yes
release	Yes	Yes

将 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>

PWA Support

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

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