内容

使用 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 渲染器。

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

flutter build web

您也可以传递 --wasm 标志来使用 WebAssembly 构建您的应用

flutter build web --wasm

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

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

使用 Flutter DevTools 执行以下任务

使用 Chrome DevTools 执行以下任务

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

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

要求