本文首发在微信公众号Flutter那些事，未经授权，严禁转载。谢谢合作。

今天是一年一度的中秋节，首先在这里祝愿大家中秋团员，阖家欢乐。希望大家吃好喝好玩好。感谢大家这么长时间一来对本公众号的大力支持。同时也非常感谢提出宝贵意见的小伙伴们。认识这么多可爱的小伙伴真的我的荣幸。节日之余，除了吃好喝好之外，别忘了停止学习，来这里有最新干货等着你哦。

在北京时间2019年9月10日的上午，谷歌正式对外公布了 Flutter1.9版本 ，然后我第一时间就体验了一把Flutter最新内容，其中也遇到了不少的坑，这里我写了一篇博客专门分享给大家，希望大家可以少走弯路。喜欢的话，就关注一下我的博客吧。

首先我这里画了一张流程图，放上来让大家先看看，熟悉一下，帮助大家更快的掌握整个流程。

一、切换分支并升级到最新版本

建议使用master分支。使用 flutter upgrade 命令升级到最新版本。

二、使用命令 flutter run -d chrome 初次体验就报错了。

我新建了一个项目flutter_demo，然后我运行flutter run -d chrome，然而没反应。

What’s the problem？我打开了谷歌浏览器，没有任何反应。

三、解决方案

步骤1.运行flutter config --enable-web命令，启动这个默认命令，来实现Flutter Web支持。

如果是windows，命令如下图所示：

然后会在电脑的 C:\Users\Administrator\AppData\Roaming 路径生成 flutter_settings 文件（Administrator是你的电脑名称）,你可以用文本编辑器打开，内容是这样的：

{
  "enable-web": true
}

路径截图，如下图所示：

如果是mac，你只需要运行一次
~/.flutter_settings 这个命令，如果没有该文件会自动创建这个文件，然后将以下配置复制到
flutter_settings 文件即可：

{
  "enable-web": true
}

步骤2.运行flutter run -d chrome命令，会自动下载所需要的 Web SDK

步骤3.执行命令 flutter create . （注：千万别忘了后面的点，这是一个大坑。)

步骤4.这时候再运行flutter run -d chrome即可自动把Flutter代码运行在浏览器上面了。

以下是浏览器截图：

总结

1.运行flutter config --enable-web命令

2.执行命令 flutter create . （千万别忘了后面的点，这是一个大坑。）

3.以后创建任何Flutter项目，只需要执行 flutter run -d chrome 命令即可运行在浏览器了。

四、生成release版本的web文件

执行 flutter build web 命令即可把dart文件编译成html、js、css文件，然后就可以部署到网站了。

命令行使用如下所示：

编译生成的web需要的文件在项目的根路径的build/web里面，如下图红色框框所示：

五、部署到网站

（1）部署的时候遇到的坑和解决方案

问题1：部署到网页怎么也打不开页面，一直是空白的，仅仅是本地调试的时候是可以运行的。

我发现部署到GitHub或者外部网站，怎么也打不开网页，后来我看到了在项目的根路径的build/web里面，有一个main.dart.js.map的文件。里面引入了本地的flutter_web_sdk目录的相关文件。然后我就去找对应的文件所在路径。

◆ 问题一的解决方案：

找到Flutter安装路径(例如：我的是 E:/develop/flutter)，然后打开里面的bin/cache/flutter_web_sdk/flutter_web_sdk/，将里面这层 flutter_web_sdk文件夹的所有内容复制到 项目根目录/build/web里面，然后重新运行 flutter build web 即可。（PS：不知道为啥会有两层同名文件夹？真是坑大了。。）

具体拷贝哪一个目录，请看下图：

问题2： FileSystemException: Deletion failed, path = ‘.dart_tool/build/flutter_web’ (OS Error: 目录不是空的, errno = 145)

◆ 问题二的解决方案：

删除项目根目录的.dart_tools文件，然后重新执行命令 flutter build web 即可。

（三）问题3：Flutter Web不支持组件直接跳转到外部网页

Flutter里面的Button想要跳转到网页，我用的是 url_launcher跳转到外部网页，如果使用 flutter build web编译后的页面在浏览器没任何效果。

我已经给官方提了 issues，官方工作人员表示会尽快支持并完善该功能，还对我的反馈表示感谢。

（2）网站页面

我们这里只是演示一个计算器的小功能（代码来源于官方的sample），这里只是把计算器的那个代码转换为一个 Flutter Web功能的演示。

演示页面: https://aweiloveandroid.githu…

GitHub 首页: https://github.com/AweiLoveAn…

（3）网站页面示例gif图形演示

更多精彩干货，欢迎关注微信公众号 Flutter那些事。