vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+vite低版本浏览器兼容

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

作者:AniDe_Bear

项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下

前言

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

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

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

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

教程

// 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的浏览器的支持,同时还有语法降级处理。

先进行安装:

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

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

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

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

// 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降级脚本,从而避免了以前打包时一刀切的兼容方式,所有的代码全部降级处理,使得一些新设备没法体现出新语法的性能。

以上就是vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)的详细内容,更多关于vue3+vite低版本浏览器兼容的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文