阅读数:243 评论数:0

一、问题描述

vite+vue3项目开发完以后，你会发现打包后的项目运行在新版浏览器可以正常显示，但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显示一片空白，并且没有任何的错误提示。

二、问题分析

原因：那些版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码。

三、解决方案

vite官方的插件中有一个关于浏览器兼容支持的插件

@vitejs/plugin-legacy

1、安装此插件

npm i @vitejs/plugin-legacy -D

2、然后在vite.config.js中配置

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要兼容的目标列表，可以设置多个
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        })
    ]
})

使用此插件后，打包完成的目录多出一些带有legacy字样的文件，html文件中新增了一些脚本，这些脚本根据浏览器的支持程序来动态的引入正常版本文件还是带有legacy字样的文件。