1.移动端浏览器与pc端浏览器浏览显示效果样式不一致
出现显示不一致的情况,是渲染器选择auto或者指定html的问题,需要指定为canvaskit渲染器,保证一致性。
首先默认打包web正式版本的命令是:flutter build web --release
其中隐藏了一个一个参数,如下:
--web-renderer
可选参数值为 auto
、html
或 canvaskit
。
-
auto
(默认)- 自动选择渲染器。移动端浏览器选择 HTML,桌面端浏览器选择 CanvasKit。 -
html
- 强制使用 HTML 渲染器。 -
canvaskit
- 强制使用 CanvasKit 渲染器。
可以通过参数指定web打包后的渲染器选择,分别如下:
自动选择渲染器:flutter build web --release
指定html渲染器(可能出现手机浏览器端与pc浏览器端显示效果不一致,体积小):flutter build web --web-renderer html
--release
指定canvaskit渲染器(显示效果一致,但是体积变大):flutter build web --web-renderer canvaskit
--release
2.指定canvaskit出现中文乱码
如果出现莫名问题,一定要去GitHub上找issuse。出现问题的原因请参考pr,解决问题的方式很简单,升级flutter版本即可,输入如下命令:
flutter channel master
flutter upgrade -f
参考pr:
https://github.com/flutter/flutter/issues/74785
https://github.com/flutter/flutter/issues/73628
升级前的效果:
如下两个不同渲染,显示效果在移动端浏览器有差异,在代码一致的情况下。
auto 默认渲染:https://oy-paddy.github.io/flutter_web/web/index.html
指定canvaskit渲染(flutter版本2.0.1):https://oy-paddy.github.io/flutter_web/web2/index.html
升级后的效果:
指定canvaskit渲染(flutter版本2.0.3):https://oy-paddy.github.io/flutter_web/web5/index.html
3.发布
打包成功后,如果你想放在springboot的static目录下访问,或者其他静态文件夹下,请修改build/web/index.html 文件的base地址,参考如下: