构建和发布 Web 应用
在典型的开发周期中，您使用 flutter run -d chrome（例如）在命令行中测试应用程序。这将构建应用程序的 调试 版本。
此页面帮助您准备应用程序的 发布 版本，并涵盖以下主题：
构建用于发布的应用程序
#使用 flutter build web 命令构建用于部署的应用程序。
flutter build web这会生成应用程序（包括资源），并将文件放置到项目的 /build/web 目录中。
要验证应用程序的发布版本，请启动一个 Web 服务器（例如，python -m http.server 8000，或使用 dhttpd 包），然后打开 /build/web 目录。在浏览器中导航到 localhost:8000（给定 python SimpleHTTPServer 示例）以查看应用程序的发布版本。
其他构建标志
#您可能需要部署配置文件或调试版本进行测试。为此，请将 --profile 或 --debug 标志传递给 flutter build web 命令。配置文件专门用于使用 Chrome DevTools 进行性能分析，调试版本可用于配置 dart2js 以尊重断言并更改优化级别（使用 -O 标志）。
选择构建模式和渲染器
#Flutter Web 提供两种构建模式（默认和 WebAssembly）和两种渲染器 (canvaskit 和 skwasm)。
有关更多信息，请参阅Web 渲染器。
部署到网络
#准备好部署应用程序后，请将发布包上传到 Firebase、云或类似的服务。这里有一些可能性，但还有很多其他的：
部署到 Firebase 托管
#您可以使用 Firebase CLI 来构建和发布您的 Flutter 应用程序以及 Firebase 托管。
开始之前
#要开始，请安装或更新 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，因此您无需单独构建应用程序。
要了解更多信息，请访问 Flutter Web 的官方Firebase 托管 文档。
处理网络上的图像
#Web 支持标准的 Image 小部件来显示图像。根据设计，Web 浏览器运行不受信任的代码，而不会危害主机计算机。与移动和桌面平台相比，这限制了您可以对图像执行的操作。
有关更多信息，请参阅在 Web 上显示图像。
代码压缩
#为了改进应用程序的启动速度，编译器通过删除未使用的代码（称为 tree shaking）以及将代码符号重命名为较短的字符串（例如，将 AlignmentGeometryTween 重命名为类似 ab 的内容）来减小编译代码的大小。应用这两个优化中的哪一个取决于构建模式：
| Web 应用构建类型 | 代码压缩？ | 执行 tree shaking？ |
|---|---|---|
| debug | 否 | 否 |
| profile | 否 | 是 |
| release | 是 | 是 |
将 Flutter 应用程序嵌入 HTML 页面
#请参阅嵌入 Flutter Web。
除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。