前言

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

评论

全部评论 117

  1. cccz
    cccz
    Google Chrome Windows 10
    学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习
  2. cc
    cc
    FireFox Windows 10
    习学习学习学习学习学习学习
  3. 11
    11
    Google Chrome Windows 10
    习学习学习学习学习学习学习
  4. 接口
    接口
    Google Chrome MacOS
    习学习学习学习学习学习学习
  5. 1
    1
    Google Chrome MacOS
    习学习学习学习学习学习学习
  6. vdvd
    vdvd
    Google Chrome Windows 10
    哈巫恶化goes如何进入他害怕让他
    1. 1
      1
      Google Chrome MacOS
      @vdvd学习学习学习学习学习学习
  7. 1
    1
    Google Chrome Windows 10
    习学习学习学习学习学习学习
  8. QuXin
    QuXin
    Google Chrome Windows 10
    感谢大佬分享
  9. 12315
    12315
    Google Chrome Windows 10
    1132132说说啥
  10. 123
    123
    Google Chrome Windows 10
    可以说下 nuxt 版本吗 我nuxt3.5.0 @vitejs/plugin-legacy 4.1.1 npm run generate后发现只有依旧只有type="module"文件
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @123可能确实有问题了,nuxt的这套方式好像只能处理css的兼容,js的不行
    2. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @123

      我都是最新的了。
      "@vitejs/plugin-legacy": "^5.4.1",
      "nuxt": "^3.12.4"

      1. 34
        34
        Google Chrome Windows 10
        @木灵鱼儿学习一下怎么配置的

目录