前言

项目全线使用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

评论

全部评论 156

  1. Soya
    Soya
    Google Chrome Windows 10
    啊啊啊啊啊啊啊
  2. 222222
    222222
    Google Chrome Windows 10
    学习学习学习学习学习学习
    1. 阿三大苏打撒旦
      阿三大苏打撒旦
      Google Chrome Windows 10
      @222222sdfsdfdsfcsd士大夫
  3. 閑庭信歩
    閑庭信歩
    QQ Browser Windows 10
    学习学习学习学习学习学习
  4. 小智
    小智
    Google Chrome Windows 10
    学习学习学习学习学习学习
  5. 小智
    小智
    Google Chrome Windows 10
    学习学习学习学习学习学习
  6. 1
    1
    Google Chrome Windows 10
    习学习学习学习学习学习学习
  7. 三七
    三七
    Google Chrome Windows 10
    红米手机默认浏览器打不开vite+vue3页面,找了好多教程了,都不管用,希望这个管用
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @三七我记得小米的浏览器内核是远古版本,多半是这个问题,而且还有很多莫名其妙的问题
  8. cccz
    cccz
    Google Chrome Windows 10
    学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习
  9. cc
    cc
    FireFox Windows 10
    习学习学习学习学习学习学习
  10. 11
    11
    Google Chrome Windows 10
    习学习学习学习学习学习学习

目录