构建和发布为 Web 应用

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

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

• 构建正式版本的应用

• 部署应用到 Web

• 部署到 Firebase 主机

• 处理 Web 中的图片

• 选择构建模式和渲染器

• 压缩

使用 flutter build web 命令构建应用程序，以便进行部署。

flutter build web

这将生成包括资源的应用程序，这些文件将放入项目的 /build/web 目录中。

如果要验证构建的应用发布版本 (release)，你可以启动 Web 服务器（例如，python -m http.server 8000，或使用 dhttpd package），然后打开 /build/web 目录。在浏览器中访问 localhost:8000（以 Python 启动的服务器为例）来查看应用程序的发布版本 (release)。

You might need to deploy a profile or debug build for testing. To do this, pass the --profile or --debug flag to the flutter build web command. Profile builds are specialized for performance profiling using Chrome DevTools, and debug builds can be used to configure dart2js to respect assertions and change the optimization level (using the -O flag.)

Flutter web provides two build modes (default and WebAssembly) and two renderers (canvaskit and skwasm).

For more information, see Web renderers.

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:

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

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

To get started, install or update the Firebase CLI:

npm install -g firebase-tools

1. Enable the web frameworks preview to the Firebase framework-aware CLI:

   firebase experiments:enable webframeworks

2. In an empty directory or an existing Flutter project, run the initialization command:

   firebase init hosting

3. Answer yes when asked if you want to use a web framework.

4. If you're in an empty directory, you'll be asked to choose your web framework. Choose Flutter Web.

5. Choose your hosting source directory; this could be an existing flutter app.

6. Select a region to host your files.

7. Choose whether to set up automatic builds and deploys with GitHub.

8. 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.

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.

To improve app start-up the compiler reduces the size of the compiled code by removing unused code (known as tree shaking), and by renaming code symbols to shorter strings (e.g. by renaming AlignmentGeometryTween to something like ab). Which of these two optimizations are applied depends on the build mode:

请参阅 内嵌 Flutter Web。

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-12-02。 查看文档源码 或者 为本页面内容提出建议。