vue3与vite低版本浏览器兼容方案

原因

原理性原因: vite 用了很多新的特性，IE 是肯定不支持的，老版本的 Chrome, Firefox, Safari 也不支持。

实际原因: 我基于 vue3 和 vite 开发了一个开源项目，但在自己买的 android 平板的默认浏览器上打不开(白屏了)，越想越气，于是决定着手尝试解决

解决方案

安装依赖

pnpm add @vitejs/plugin-legacy terser -D
pnpm add regenerator-runtime

vite.config.ts中配置@vitejs/plugin-legacy插件

import legacy from '@vitejs/plugin-legacy'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  const resultConfig: UserConfigExport = {
    plugins: [
      legacy({
        targets: ['defaults', 'ie >= 11', 'chrome 52'], //需要兼容的目标列表，可以设置多个
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      }),
    ],
    // 默认为/, 用于发布在非根目录的时候需要设置该值
    base: env.VITE_PUBLIC_BASEPATH,
  }
  return resultConfig
}

补充资料

core-js 到底是什么?

ECMAScript 的迅速成长以及浏览器的频繁更新换代，每年会出现新的 api ，举个例子 es6 时期诞生的 'Promise' ，'Set' 或者是 'es7' 数组新提供的方法 'includes' ,这些新加入的 'api' ，就引出一个词 "polyfill" 'polyfill(垫片/补丁)' 就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。新功能的 es'api'转换为大部分现代浏览器都可以支持运行的一个'api' 补丁包集合。

它支持最新的 ECMAScript 标准
它支持 ECMAScript 标准库提案
它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关）
它最大限度的模块化：你能仅仅加载你想要使用的功能
它能够不污染全局命名空间
它和 babel 紧密集成：这能够优化 core-js 的导入
它是最普遍、最流行的给 JavaScript 标准库打补丁的方式

core-js 包含以下部分

core-js: 安装 npm install core-js 作用'定义全局的 polyfill'
core-js-pure 安装 npm i core-js-pure 作用'提供不污染全局环境的 polyfill，等价于 core-js@2/library'
core-js-compat 安装 npm i core-js-compat 作用维护了按照browserslist规范的垫片需求数据，来帮助我们找到符合目标环境的 polyfills 需求集合
core-js-builder 安装npm i core-js-builder 作用可以被 Node.js 服务使用，构建出不同场景的垫片包。
core-js-builder 安装npm i core-js-builder 作用可以结合 core-js-compact 以及 core-js，并利用 webpack 能力，根据需求打包出 core-js 代码