image
本文首发在微信公众号Flutter那些事，未经授权，严禁转载。谢谢合作。
今天是一年一度的中秋节，首先在这里祝愿大家中秋团员，阖家欢乐。希望大家吃好喝好玩好。感谢大家这么长时间一来对本公众号的大力支持。同时也非常感谢提出宝贵意见的小伙伴们。认识这么多可爱的小伙伴真的我的荣幸。节日之余，除了吃好喝好之外，别忘了停止学习，来这里有最新干货等着你哦。
在北京时间2019年9月10日的上午，谷歌正式对外公布了Flutter1.9版本，然后我第一时间就体验了一把Flutter最新内容，其中也遇到了不少的坑，这里我写了一篇博客专门分享给大家，希望大家可以少走弯路。喜欢的话，就关注一下我的博客吧。
首先我这里画了一张流程图，放上来让大家先看看，熟悉一下，帮助大家更快的掌握整个流程。
image
一、切换分支并升级到最新版本
建议使用master分支。使用 flutter upgrade 命令升级到最新版本。
二、使用命令flutter run -d chrome初次体验就报错了。
我新建了一个项目flutter_demo，然后我运行flutter run -d chrome，然而没反应。
image
What's the problem？我打开了谷歌浏览器，没有任何反应。
三、解决方案
1、步骤1.运行flutter config --enable-web命令，启动这个默认命令，来实现Flutter Web支持。
如果是windows，命令如下图所示：
image
然后会在电脑的 C:\Users\Administrator\AppData\Roaming 路径生成 flutter_settings 文件（Administrator是你的电脑名称）,你可以用文本编辑器打开，内容是这样的：
{
"enable-web": true
}
路径截图，如下图所示：
image
如果是mac，你只需要运行一次
~/.flutter_settings这个命令，如果没有该文件会自动创建这个文件，然后将以下配置复制到flutter_settings文件即可：
{
"enable-web": true
}
2、步骤2.运行flutter run -d chrome命令，会自动下载所需要的 Web SDK
如下图所示：
image
3、步骤3.执行命令 flutter create . （注：千万别忘了后面的点，这是一个大坑。)
如下图所示：
image
4、步骤4.这时候再运行flutter run -d chrome即可自动把Flutter代码运行在浏览器上面了。
如下图所示：
image
以下是浏览器截图：
image
5、总结
- 1.运行
flutter config --enable-web命令 - 2.执行命令
flutter create .（千万别忘了后面的点，这是一个大坑。） - 3.以后创建任何Flutter项目，只需要执行
flutter run -d chrome命令即可运行在浏览器了。
四、生成release版本的web文件
执行
flutter build web命令即可把dart文件编译成html、js、css文件，然后就可以部署到网站了。
命令行使用如下所示：
image
编译生成的web需要的文件在项目的根路径的build/web里面，如下图红色框框所示：
image
五、部署到网站
（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：不知道为啥会有两层同名文件夹？真是坑大了。。）
具体拷贝哪一个目录，请看下图：
image
问题2： FileSystemException: Deletion failed, path = '.dart_tool/build/flutter_web' (OS Error: 目录不是空的, errno = 145)
image
◆ 问题二的解决方案：
删除项目根目录的.dart_tools文件，然后重新执行命令 flutter build web 即可。
（三）问题3：Flutter Web不支持组件直接跳转到外部网页
Flutter里面的Button想要跳转到网页，我用的是 url_launcher跳转到外部网页，如果使用 flutter build web编译后的页面在浏览器没任何效果。
image
我已经给官方提了 issues，官方工作人员表示会尽快支持并完善该功能，还对我的反馈表示感谢。
六、网站页面
我们这里只是演示一个计算器的小功能（代码来源于官方的sample），这里只是把计算器的那个代码转换为一个 Flutter Web功能的演示。
演示页面: https://aweiloveandroid.github.io/flutter_demo/#/
GitHub 首页: https://github.com/AweiLoveAndroid/AweiLoveAndroid.github.io
七、网站页面示例gif图形演示
image
更多精彩干货，欢迎关注微信公众号 Flutter那些事。
网友评论