前言

项目全线使用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兼容低版本白屏legacy
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

全部评论 49

  1. Smecta
    Smecta
    Google Chrome MacOS
    123发送
    回复
  2. 冬雨蝉
    冬雨蝉
    Google Chrome Windows 10
    123发送
    回复
  3. 帅
    帅
    Google Chrome Windows 10
    这个就遇帅
    回复
    1. onePerson
      onePerson
      Google Chrome MacOS
      @帅test1测试
      回复
  4. 111
    111
    Google Chrome Windows 10
    111ft发过火
    回复
  5. 12312
    12312
    Google Chrome Windows 10
    12312送达
    回复
  6. 三哥
    三哥
    Google Chrome MacOS
    刚好有个项目需要，来看看
    回复
  7. 学习
    学习
    Google Chrome Windows 10
    学习学习学习学习学习学习学习学习
    回复
  8. 11
    11
    Google Chrome MacOS
    回复回复回复
    回复
  9. 夜袭
    夜袭
    Google Chrome Windows 10
    学习学习学习
    回复
  10. 学习学习
    学习学习
    Google Chrome MacOS
    学习学习学习学习学习学习学习学习
    回复
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

相关推荐

vite+vue3 代替require()的hooks

木灵鱼儿 509 15 0
vue3 vite hooks

解决vite开发时使用vant自动引入组件导致的二次构建

木灵鱼儿 1673 141 1
vant vite 自动加载

vite+vue3多页面（多入口）教程

木灵鱼儿 1149 22 4
vue3 多页面 vite

vite插件：处理不同平台但共用同一个window下的全局变量sdk方案

木灵鱼儿 671 0 0
插件 vite sdk

vite多页面实现一个html文件压缩插件

木灵鱼儿 941 0 1
插件 压缩 html

vite中typescript+eslint+prettier一份官方预设配置

木灵鱼儿 1035 29 0
vue eslint TypeScript

vite中多环境变量务必了解的知识

木灵鱼儿 1531 28 0
环境变量 env vite

vue3 自定义移动端拖拽指令（支持吸边和offset间距以及回调）

木灵鱼儿 1022 174 0
拖拽 自定义指令 vue3

vite编写一个内联js的插件vite-plugin-inline-js

木灵鱼儿 906 102 0
vite plugin vite插件

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖

木灵鱼儿 2440 81 2
自动引入 ts vite
获得点赞 5
文章被阅读 5,887
最后更新 23-12-13 10:40:35

目录

目录