构建 Flutter Web 应用

本篇内容概述了如何使用 Flutter 来配置、运行以及构建 Web 应用。

在你使用 Flutter 构建 Web 应用之前，请确保已安装 Flutter SDK 以及 Web 浏览器。相关详细说明，请查阅设置 Flutter Web 开发环境

为了设置你的项目，你可以创建一个新的 Flutter 项目，或者为现有项目添加 Web 支持。

运行以下命令，来创建一个支持 Web 的新应用：

flutter create my_app

如果你已经有了一个项目，请在项目目录中运行以下 flutter create 命令：

flutter create . --platforms web

这会创建一个 web/ 目录，其中包含用于启动和运行 Flutter 应用的 Web 资源。

选择使用 Chrome 作为运行和调试 Flutter Web 应用的目标浏览器：

flutter run -d chrome

你也可以在 IDE 中选择 Chrome 作为目标浏览器。

如果你想使用其他浏览器，你还可以使用 Windows 上的 edge 浏览器，或者使用 web-server 在浏览器中访问本地服务的 URL。

你可以通过 --wasm 标志，使用 WebAssembly 来运行应用：

flutter run -d chrome --wasm

Flutter Web 提供多种构建模式和渲染器。想要了解更多信息，请查阅 Web 渲染器。

运行以下命令生成发布版本 (release) 的构建：

flutter build web

你还可以通过 --wasm 标志，使用 WebAssembly 来构建应用：

flutter build web --wasm

这会在 build/web 目录中生成构建文件，包括需要一起提供服务的 assets 目录。

如果你想要了解更多关于如何将这些资源部署到 Web 的信息，请查阅构建和发布 Web 应用。如果你有其他常见问题需要解答，可以查阅 Web 常见问题。

你可以使用 Flutter DevTools 来进行以下调试：

你可以使用 Chrome DevTools 来进行以下调试：

你可以使用 Widget 测试或者集成测试。想要了解在浏览器中运行集成测试的更多信息，请查阅集成测试文档。

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

必要条件