解决Vue3.0+Vite项目打包后低版本浏览器兼容性问题

一、Vite在低版本浏览器中运行遇到的问题

vite+vue3项目打包上线后，运行在新版浏览器可以正常显示，但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显示一片空白。错误提示 SyntaxError: Unexpected token '?' promiseReactionJob。

二、浏览器兼容性

默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。作为参考，Vite 使用这个 browserslist 作为查询标准：

• Chrome >=87
• Firefox >=78
• Safari >=13
• Edge >=88 也可以通过 build.target 配置项 指定构建目标，最低支持 es2015。 默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。

三、解决方案：@vitejs/plugin-legacy插件

1. 问题分析：

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

2. 解决方案：

• 安装插件：(如果安装失败，可能是vite版本兼容问题，可选择指定版本进行下载plugin-legacy - npm)

npm i @vitejs/plugin-legacy

• 在vite.config.js中配置

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
     legacy({
         targets: ['defaults', 'ie >= 11'],  //需要兼容的目标列表，可以设置多个
         additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
         renderLegacyChunks:true,
         polyfills:[
            'es.symbol',
            'es.array.filter',
            'es.promise',
            'es.promise.finally',
            'es/map',
            'es/set',
            'es.array.for-each',
            'es.object.define-properties',
            'es.object.define-property',
            'es.object.get-own-property-descriptor',
            'es.object.get-own-property-descriptors',
            'es.object.keys',
            'es.object.to-string',
            'web.dom-collections.for-each',
            'esnext.global-this',
            'esnext.string.match-all'
        ]
     })
  ]
}