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

要暂时禁用 VS Code 中的热重载支持，请在您的 launch.json 文件 中添加 --no-web-experimental-hot-reload 标志。

"configurations": [
    ...
    {
      "name": "Flutter for web (hot reload disabled)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome",
        "--no-web-experimental-hot-reload",
      ]
    }
  ]

如果您从命令行使用 flutter run，可以使用以下命令暂时禁用 Web 上的热重载：

flutter run -d chrome --no-web-experimental-hot-reload

DartPad 也启用了热重载功能，并新增了一个“重新加载”按钮。该功能仅在检测到运行的应用程序中有 Flutter 时才可用。您可以通过选择 DartPad 提供的示例应用来开始一个可热重载的会话。

有关构建应用的信息，请参阅以下部分。

运行以下命令以生成发布版本：

flutter build web

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

flutter build web --wasm

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

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

使用 Flutter DevTools 执行以下任务：

• 调试
• 日志记录
• 运行 Flutter Inspector

使用 Chrome DevTools 执行以下任务：

• 生成事件时间线
• 分析性能 — 确保使用 profile 构建。

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