共计 2154 个字符，预计需要花费 6 分钟才能阅读完成。
本文首发在微信公众号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 那些事。
