十分钟学会vite项目兼容谷歌49版本！！！

客户：xp系统+谷歌49！！！！！

看看官方文档怎么说的呢

浏览器兼容性¶

用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：

• Chrome >=87
• Firefox >=78
• Safari >=13
• Edge >=88

你也可以通过 build.target 配置项 指定构建目标，最低支持 es2015。

请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。你可以前往 Polyfill.io 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务。

传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

所以vite提供了@vitejs/plugin-legacy这个插件来解决项目在低版本浏览器运行的问题

那么我们看看怎么配置

我的项目中使用的是2.0版本，"@vitejs/plugin-legacy": "^2.0.0" vite版本是3.2.3

除了安装这个legacy插件呢，我们还要安装core-js，它是用来针对低版本浏览器中不能实现，现代浏览器中对应的api引入的一个库

import legacy from "@vitejs/plugin-legacy";
export default defineConfig(({ mode, command }) => 
  return {
       legacy({
         targets: ["defaults", "ie >= 11", "Chrome >= 49"], // 支持现代浏览器以及 IE 11 及Chrome49以上版本 添加对应的polyfill
         additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
         renderLegacyChunks: true,
     }),
  }

})

在main.js文件中的顶部引入项目中需要用到的polyfill
import "core-js/features/object/entries";
import "core-js/features/object/values";
import "core-js/stable/array/flat-map";
import "regenerator-runtime/runtime";

到此为止，它能用啦！！！！各位大佬多多指教！！