flutter|flutter 2.0 web体验及web打包遇到的坑 flutter2.0web体验及web打包遇到的

听说flutter 2.0后直接支持web端了, 意思就是不需要进行flutter channel变成master的,就可以体验web端, 怀着好奇心就开始了
1. 如果你的flutter版本还没有升级到2.0版本的话,请自行进行升级
文章图片
image.png

flutter --versionflutter upgrade --force

2.创建一个新的flutter 项目

文章图片
image.png 我这里创建一个叫flutter_app_web的项目;
如果小伙伴们已经安装过了chrome浏览器的话,如下图位置就可以看到多了一个Chrome(web)的选项,是不是很神奇!

文章图片
image.png 选择Chrome(web)这个,然后把工程跑起来,就可以看到代码跑到web端喽.如下图

文章图片
image.png 初步体验完成!!! 下面是打包web相关 1.我们稍微改动一下代码,把主题色由蓝色改为紫色! 如下图

文章图片
image.png 细心的小伙伴可能会发现,安卓有android文件夹, iOS 有ios的文件夹,但目前目录结构是没有web文件夹的,如下图

文章图片
image.png 2. 创建web文件夹输入下面的命令创建web文件

flutter create .

然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图

文章图片
image.png 3. 打包web版本我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来; 同样的道理要给浏览器用,也需要打包web相关代码.

flutter build web --web-renderer htmlflutter build web flutter build web --web-renderer canvaskit

经过测试,上面三种方式都可以打包web版本, 其中第一种是针对移动端的打包方式, 第二种是一般的打包方式, 第三种是针对pc端的打包方式.
那这3种方式打包出来,运行起来有什么不同呢
flutter build web --web-renderer html 打开速度最快,兼容性好(是指ie,chrome,safari等浏览器兼容)
flutter build web 打开速度一般,兼容性好
flutter build web --web-renderer canvaskit 打开速度最慢,兼容性好
结论
就是使用第一种打包方式会比较好

flutter build web --web-renderer html

打包过程中遇到的坑坑1: 找不到打包完文件在哪里如下图解决

文章图片
image.png 坑2: 找到了index.html,用浏览器打开一片空白这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等
坑3: 已经放到tomcat了,用浏览器打开还是一片空白那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把,改成
方法2:
用编辑器打开index.html,能看到源文件,把,改成你服务器的路径比喻说:

文章图片
image.png 改完这个,再上传到服务器tomcat上,然后再来访问,相信就会正常了
我这边最后是这样的

文章图片
image.png 结尾今天的分享先到这里了,后续会分享更多的干货,欢迎点赞,加关注了,如下其他问题,欢迎留言喽~祝君好运!!
补充 【flutter|flutter 2.0 web体验及web打包遇到的坑】有的小伙伴可能会说，我已经按照上面的步骤做了，但还是打不开，还是一片空白，是怎么回事啊！经过本人这边测试，低版本的IE浏览器和低版本的 Chrome浏览器是会出现这样的现象！这个时候，只需要把浏览器升级成最新的版本，就可以啦！！！祝君好运~