vite+vue3实现低版本浏览器兼容的解决方案（白屏问题）

前言

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

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

es2020
edge 88
firefox 78
chrome 87
safari 14

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

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

教程

typescript 复制代码

// vite.config.ts 
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 

// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [vue()], 
    build: { target: "es2015" } 
})

通过指定打包后的目标版本就行了，vite会将新的语法通过esbuild进行转换，此时我们在支持esm的浏览器上访问时正常的。（注意只有打包后的代码才会有效）

这里我特意大写了 支持ESM的浏览器是有用意的，我们看下打包后的index.html文件。

可以看到script标签上使用了type="module"属性，显然即便我们的脚本里面已经兼容到了es2015，但是如果浏览器稍微低一点的版本的，它是支持es2015但是它不支持ESM模块啊。

我们看一下对应的支持统计：

es2015

es6版本最经典的就是proxy的支持

ESM模块

可以看到和es2015的支持度还是有一些差别的。

那么就进入到第二个问题，如何兼容不支持esm的浏览器！

兼容ESM浏览器

官方提供了一个插件：legacy

官方对它的定义是：为打包后的文件提供传统浏览器兼容性支持

其实就是对不支持esm的浏览器的支持，同时还有语法降级处理。

先进行安装：

bash 复制代码

pnpm i @vitejs/plugin-legacy@4.1.1 terser -D

需要注意的是vite4的legacy插件最高目前是4.1.1，再高的版本只支持vite5了，使用起来会报错。

legacy插件需要依赖terser对代码进行压缩。

使用起来也很简单，我们直接引入插件并启用即可：

typescript 复制代码

// vite.config.ts 
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import legacy from "@vitejs/plugin-legacy"; 

// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [ 
        vue(), 
        legacy() 
    ], 
    build: { 
        target: "es2015" 
    } 
})

官方定义，在没有明确指定插件配置参数targets时，他会去读取项目中的.browserslistrc文件，我们知道这个文件是一个用于配置支持的浏览器范围的文件，通常会被Babel、Autoprefixer等插件使用。

我个人根据es2015的支持版本书写了一下内容：

.browserslistrc

复制代码

Chrome >= 51 
Edge >= 15 
Safari >= 10 
Firefox >= 54 
Opera >= 38 
iOS >= 10 
not ie <= 11 
Android >= 5 
not IE <= 11

然后我们再去打包项目，可以发现index.html的脚本引入发生了变化。

可以看到script发生了变化，除了type="module"还有一个nomodule脚本，nomodule这个属性表示在支持esm的浏览器不运行里面的代码，而不支持esm的浏览器又无法识别type="module"，反而会去运行nomodule的script，从而实现了降级区分。

而降级的脚本都会携带一个legacy文本

这个就是用于兼容不支持esm模块的浏览器降级方案。

这个方式的好处在较新的浏览器中可以使用新的特性，旧的浏览器使用legacy降级脚本，从而避免了以前打包时一刀切的兼容方式，所有的代码全部降级处理，使得一些新设备没法体现出新语法的性能。