接下来是迁移的过程

可以参考 https://juejin.cn/post/1 如何搭建环境

先看看 flutter web 的目录结构

这个flutter 生成的空项目的目录结构

观察可以发现，相对于原有的flutter 目录结构，flutter_web 只是多了一个 web 文件夹。

毫无疑问，web/main.dart 就是入口了，所以先把web文件夹复制到原项目。

与原flutter 项目相比，flutter_web pubspec.yaml 也有较大的变化。不管那么多，用新构建文件替换掉原项目的 pubspec.yaml

然后重新构建一下项目。

第二步完成之后，整个项目应该全部都飘红了。（如下图）

没办法，flutter_web 与 flutter 使用的不是同一个包。需要将所有名为 flutter 的 packages 全部改为 flutter_web。

另外，dart:ui 也需要替换成 flutter_web_ui/ui.dart

一般情况下， flutter 资源文件都是放在 项目/assets/ 目录下，然后通过 pubspec.yaml 配置引入到工程中。

但是 web 开发不同，需要将 assets 文件夹移到 /web/ 下。

切记移除干净 flutter_web 不支持的依赖，不然编译会被跳过的。

命令行输入 webdev serve 来构建和运行

之后用本地浏览器打开： http://localhost:8080 就可以看到效果了。

一次编写，到处运行，爽！！！

flutter_web 虽然也是使用 flutter 构建 web 应用，但是由于库的包名与flutter不一致，导致了迁移过程需要修改很多文件。

于是，这样移动开发和web开发还是需要维护两套代码（或者说需要在两个代码库中进行同步），这么徒增了不少成本。希望以后可以改进吧。

如果觉得有帮助，别忘了点颗 star ✨哦。