Contents

使用 Flutter 构建 Web 应用程序

Contents

本页面概述了如何配置、运行和构建使用 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 渲染器。

运行以下命令以生成发行版构建：

flutter build web

您还可以传递 --wasm 标志来使用 WebAssembly 构建您的应用程序：

flutter build web --wasm

这将填充一个 build/web 目录，其中包含已构建的文件，包括一个 assets 目录，这些文件需要一起提供服务。

要了解有关如何将这些资源部署到 Web 的更多信息，请参阅构建和发布 Web 应用。有关其他常见问题的答案，请参阅Web 常见问题解答。

使用Flutter DevTools 执行以下任务：

使用Chrome DevTools 执行以下任务：

使用部件测试或集成测试。要了解有关在浏览器中运行集成测试的更多信息，请参阅集成测试页面。

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

要求