前言

项目全线使用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. 你的老父亲
    你的老父亲
    Google Chrome Windows 10
    SB儿子顶顶顶
    回复
  2. x
    x
    Google Chrome Windows 10
    什么玩意
    回复
  3. xxx
    xxx
    Google Chrome Windows 10
    测试ceshi
    回复
  4. 老王
    老王
    Google Chrome Windows 10
    大佬666
    回复
    1. lilei
      lilei
      Google Chrome Windows 10
      @老王学习学习学习
      回复
    2. 123
      123
      Google Chrome Windows 10
      @老王123123阿瓦达吴大维
      回复
    3. 哈哈
      哈哈
      Safari iPhone
      @老王白屏真头疼
      回复
    4. 唯墨
      唯墨
      Google Chrome Windows 10
      @老王666666奈斯
      回复
    5. 1111
      1111
      Google Chrome Windows 10
      @老王1111111111111哦
      回复
    6. 123
      123
      Google Chrome Android
      @老王[微笑][微笑]膜拜大佬[微笑]
      回复
    7. 分号
      分号
      Google Chrome Windows 10
      @老王瞅瞅...
      回复
    8. dream
      dream
      Google Chrome Windows 10
      @老王大佬66666
      回复
  5. 阿奇
    阿奇
    Google Chrome Windows 10
    测试kankan
    回复
    1. 杨
      杨
      Google Chrome MacOS
      @阿奇学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习
      回复
    2. 杨
      杨
      Google Chrome MacOS
      @阿奇学习学习学习学习学习学习
      回复
  6. 啊啊
    啊啊
    Google Chrome Windows 10
    你好aasaaa
    回复
  7. node
    node
    Google Chrome Windows 10
    vue3在ie11下白屏
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @node兄弟，vue3不支持ie
      回复
  8. noCanNObb
    noCanNObb
    QQ Browser Windows 10
    ...啊实打实的
    回复
  9. 321
    321
    Google Chrome Windows 10
    123aa啊
    回复
    1. 22
      22
      Google Chrome Windows 10
      @321评论内容请不少于一个中文汉字
      回复
      1. 威威威威
        威威威威
        Google Chrome Windows 10
        @22哈哈哈哈混合
        回复
      2. 1
        1
        Google Chrome Windows 10
        @22学习学习学习
        回复
      3. dejavu
        dejavu
        Google Chrome MacOS
        @22不错不错 感谢
        回复
    2. rossee
      rossee
      Google Chrome Windows 10
      @321666666牛
      回复
    3. yl
      yl
      Google Chrome Windows 10
      @321墙333333
      回复
    4. 1
      1
      Google Chrome Windows 10
      @321你还哦啊啊啊啊啊
      回复
  10. sakrua
    sakrua
    Google Chrome Windows 10
    test测试
    回复
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. ...
  9. 9

相关推荐

搭建一个vite+vue+ts的Chrome插件开发模板

木灵鱼儿 287 21 2
插件 模板 vue3

Nuxt3 控制打包输出目录

木灵鱼儿 1793 115 0
打包 输出路径 Nuxt3

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

木灵鱼儿 1691 0 4
路径 Nuxt3 a元素

Nuxt3 解决出现两份css样式问题

木灵鱼儿 4116 56 16
样式 Nuxt3

vite5 打包体积分析（对标webpack包体分析）

木灵鱼儿 2352 103 0
vite 包体分析

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

木灵鱼儿 24156 323 97
cookie Nuxt3 请求

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

木灵鱼儿 2456 463 2
爬虫 Nuxt3 SEO

Nuxt3 部署与PM2集群

木灵鱼儿 3700 0 18
spa 部署 Nuxt3

Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

木灵鱼儿 2572 99 0
自动引入 pinia Nuxt3

Nuxt3 环境变量配置

木灵鱼儿 2338 69 0
安全 环境变量 dotenv
获得点赞 62
文章被阅读 33,822
最后更新 24-07-11 21:39:58

目录

目录