前言

项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,比如这两年开始普及的可选链语法,这个语法都已经纳入声呐的代码规范中了,但是vite自身打包的时候,并不会做过多的兼容处理。

默认情况vite的兼容目标是支持原生ES模块原生ESM动态导入import.meta的浏览器,官方预设的兼容目标如下:

  1. es2020
  2. edge 88
  3. firefox 78
  4. chrome 87
  5. safari 14

而我们的可选链正是es2020版本才有的,所以vite在打包后不会做任何兼容处理,这就导致了一些浏览器版本低一点的设备,打开网站就会出现白屏的情况。

显然这么新的版本在大部分的目标用户中,也是很超前的,所以做一些适当的兼容处理还是有必要的。

教程

此处内容已隐藏回复后方可阅读。

分类: vue 项目实战 标签: vue3vite兼容低版本白屏legacyNuxt3

评论

全部评论 74

  1. 666
    666
    Google Chrome MacOS
    666大佬
  2. Shawn
    Shawn
    Google Chrome MacOS
    有个不知道算不算bug的问题,回复可见在回复前,目录还是会显示隐藏部分的标题[脱单doge]
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @Shawn被你发现了,其实是不知道怎么隐藏,但是转念一想,有标题给访客看,起码他能知道个大概,觉得有用就回复,各取所需,然后seo也会好一点。[tv_斜眼笑]
  3. 为凤尾
    为凤尾
    Google Chrome Windows 10
    发士大夫十大发
  4. wyf
    wyf
    Google Chrome MacOS
    测试ceshi测试ceshi
  5. 你的老父亲
    你的老父亲
    Google Chrome Windows 10
    SB儿子顶顶顶
  6. x
    x
    Google Chrome Windows 10
    什么玩意
  7. xxx
    xxx
    Google Chrome Windows 10
    测试ceshi
  8. 老王
    老王
    Google Chrome Windows 10
    大佬666
    1. 分号
      分号
      Google Chrome Windows 10
      @老王瞅瞅...
    2. dream
      dream
      Google Chrome Windows 10
      @老王大佬66666
  9. 阿奇
    阿奇
    Google Chrome Windows 10
    测试kankan
  10. 啊啊
    啊啊
    Google Chrome Windows 10
    你好aasaaa

目录