vite+vue3和nuxt3实现低版本浏览器兼容的解决方案(白屏问题)
前言
项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,比如这两年开始普及的可选链语法,这个语法都已经纳入声呐的代码规范中了,但是vite自身打包的时候,并不会做过多的兼容处理。
默认情况vite的兼容目标是支持原生ES模块,原生ESM动态导入和import.meta
的浏览器,官方预设的兼容目标如下:
- es2020
- edge 88
- firefox 78
- chrome 87
- safari 14
而我们的可选链正是es2020版本才有的,所以vite在打包后不会做任何兼容处理,这就导致了一些浏览器版本低一点的设备,打开网站就会出现白屏的情况。
显然这么新的版本在大部分的目标用户中,也是很超前的,所以做一些适当的兼容处理还是有必要的。
教程
此处内容已隐藏回复后方可阅读。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
全部评论 118
123
Google Chrome Windows 10aaa
Google Chrome Windows 10111
Google Chrome Windows 10snowflake
Google Chrome Windows 101
Google Chrome MacOS12
Google Chrome Windows 10kkkk
Google Chrome
MacOS
20小时前
感谢分享!
kkkk
Google Chrome
MacOS
20小时前
感谢分享!
kkkk
Google Chrome MacOShuamiaoyi
Google Chrome Windows 10三哥
Google Chrome Windows 10倪哥
Google Chrome Windows 101122
Google Chrome Windows 10