构建 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 渲染器。

请在 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 现在已经启用热重载功能，新增了 “Reload” 按钮。该功能仅在检测到运行中的应用包含 Flutter 时才可用。你可以通过选择 DartPad 提供的示例应用来尝试热重载。

参考以下内容来构建你的应用。

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

flutter build web

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

flutter build web --wasm

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

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

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

• 调试

• 日志

• 运行 Flutter inspector 工具

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

• 生成事件时间轴

• 性能分析—确保使用 profile 构建模式

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