构建和发布 Web 应用

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

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

• 构建用于发布的应用
• 部署到 Web
• 部署到 Firebase 托管
• 处理 Web 上的图像
• 选择构建模式和渲染器
• 压缩

使用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 托管
• GitHub Pages
• Google Cloud 托管

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

要开始使用，请安装或更新 Firebase CLI

npm install -g firebase-tools

1. 将 Web 框架预览启用到Firebase 框架感知 CLI

   firebase experiments:enable webframeworks

2. 在空目录或现有 Flutter 项目中，运行初始化命令

   firebase init hosting

3. 当询问您是否要使用 Web 框架时，回答yes。

4. 如果您在空目录中，系统会要求您选择 Web 框架。选择Flutter Web。

5. 选择您的托管源目录；这可能是现有的 Flutter 应用。

6. 选择一个区域来托管您的文件。

7. 选择是否使用 GitHub 设置自动构建和部署。

8. 将应用部署到 Firebase 托管

   firebase deploy

   运行此命令会自动运行flutter build web --release，因此您无需单独构建应用。

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

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

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

为了改善应用启动时间，编译器通过删除未使用的代码（称为树摇）以及将代码符号重命名为更短的字符串（例如，将AlignmentGeometryTween重命名为类似ab的东西）来减小编译代码的大小。应用这两个优化中的哪一个取决于构建模式

请参阅嵌入 Flutter Web。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-11-21。 查看源代码 或 报告问题。