构建 Flutter Web 应用

目录

本页面将通过几个步骤让你开启 Web 平台的支持：

This page covers the following steps for getting started with web support:

  • 配置 flutter 工具开启 Web 支持。

    Configure the flutter tool for web support.

  • 创建支持 Web 的新项目。

    Create a new project with web support.

  • 运行支持 Web 的新项目。

    Run a new project with web support.

  • 构建支持 Web 的新项目。

    Build an app with web support.

  • 为现有项目添加 Web 支持。

    Add web support to an existing project.

要求

Requirements

要创建支持 Web 平台的 Flutter 应用，你需要以下这些软件内容：

To create a Flutter app with web support, you need the following software:

更多内容请阅读 Web 平台常见问题。

For more information, see the web FAQ.

创建支持 Web 的新项目

Create a new project with web support

你可以依照以下步骤创建支持 Web 的新项目。

You can use the following steps to create a new project with web support.

准备工作

Set up

运行以下命令以使用最新版本的 Flutter SDK：

Run the following commands to use the latest version of the Flutter SDK:

$ flutter channel stable
$ flutter upgrade

如果 Chrome 已经安装，flutter devices 命令会输出一个 Chrome 设备，在运行应用时会使用它启动应用；以及一个将应用提供在指定 URL 的 Web Server。

If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

$ flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

在你的 IDE 中，你可以在设备下拉列表中看到 Chrome (web)。

In your IDE, you should see Chrome (web) in the device pulldown.

创建并运行

Create and run

创建支持 Web 的新项目的步骤与 开发体验初探 中创建其他平台应用的步骤相差无几。

Creating a new project with web support is no different than creating a new Flutter project for other platforms.

编辑器 (IDE)

IDE

在 IDE 中创建新应用时，会自动包含 iOS、Android 和 Web 支持。（如果你启用了 桌面平台支持，也会一并支持。）在设备下拉列表里，选择 Chrome (web) 运行你的应用，它会在 Chrome 中启动。

Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.

命令行

Command line

运行以下命令创建支持 Web 平台的应用（包括移动端），你可以调整 myapp 为你的项目名称：

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting my_app with the name of your project:

$ flutter create my_app
$ cd my_app

想要使用 Chrome 在 localhost 访问到你的应用，在应用的根目录执行以下命令：

To serve your app from localhost in Chrome, enter the following from the top of the package:

$ flutter run -d chrome

flutter run 命令会在 Chrome 中使用 开发编译器。

The flutter run command launches the application using the development compiler in a Chrome browser.

构建

Build

运行以下命令生成 release 版本的构建：

Run the following command to generate a release build:

$ flutter build web

发布版本的构建会使用 dart2js （而不是 开发编译器）来生成单独的 main.dart.js 文件。你可以通过运行 release 模式 (flutter run --release) 或运行 flutter build web 来构建 release 模式的应用。它们会在 build/web 目录下生成构建的文件，包括需要一并提供的 assets 文件夹。

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.

同时，你可以使用 --web-renderer html 或者 --web-renderer canvaskit 分别切换 HTML 或 CanvasKit 渲染器。想要了解更多信息，你可以阅读 Web 渲染器。

You can also include --web-renderer html or --web-renderer canvaskit to select between the HTML or CanvasKit renderers, respectively. For more information, see Web renderers.

想要了解更多 Web 构建的内容，你可以阅读 构建和发布为 Web 应用。

For more information, see Build and release a web app.

为现有项目添加 Web 支持

Add web support to an existing app

要为现有的项目添加 Web 支持，请在项目的根目录下运行：

To add web support to an existing project created using a previous version of Flutter, run the following command from your project’s directory:

$ flutter create .