使用 VSCode 进行 Flutter Web 运行 - Shell-Bash

Flutter 是 Google 推出的一款跨平台应用开发框架，除了可以开发原生应用，还可以开发 Web 应用。本文将介绍如何使用 VSCode 进行 Flutter Web 应用的开发和运行。

环境准备

在开始之前，你需要在本地安装 Flutter 环境和 VSCode 编辑器。如果你还没有安装，可以参考官方文档进行安装。

创建 Flutter Web 项目

在 VSCode 中打开终端，通过下面的命令创建一个 Flutter Web 项目。

flutter create my_web_project
cd my_web_project

运行 Flutter Web 项目

Flutter Web 可以通过调试模式和发布模式进行运行。

调试模式运行

在 VSCode 编辑器中选择 Debug 栏，点击 Create a launch.json file，选择 Dart & Flutter，然后选择 Flutter: Attach to Flutter Process，这样就会在工作区根目录下生成 launch.json 文件。

打开 launch.json 文件，将 [DEBUG_PORT] 替换为你想要的端口号，然后保存文件。

现在你可以通过 Debug 模式启动 Flutter Web 应用程序，运行以下命令。

flutter run -d chrome --web-port [DEBUG_PORT]

这会在默认浏览器中打开应用并在 VSCode 中启动调试模式。如果一切顺利，你现在可以在浏览器中看到你的 Flutter Web 应用程序正在运行。

发布模式运行

在 VSCode 中打开终端，执行以下命令以构建发布版本的 Flutter Web 应用程序。

flutter build web --release

这将在 build/web 文件夹中生成一个发布版本的应用程序。可以通过本地服务器（例如，nginx）来部署这个应用程序。

结论

在本文中，我们介绍了如何使用 VSCode 进行 Flutter Web 应用的开发和运行，包括在调试模式和发布模式下运行应用程序。当你掌握了这些基础知识，就可以开始建立美观、稳健的 Flutter Web 应用程序了。