当我们网站打包上线后，有些问题我们肯定也要考虑在内，兼容性也是其中一个重要的一种，可能会有人说，都2023年了，还在乎那些废弃的游览器干啥，我只能说，错！大错特错！
我们不可避免有一些用户使用的是低内核的游览器，包括一些网吧、校企电脑、智能手机也同样低版本的游览器，就拿我的一台魅族16th备用机举例，他的自带游览器的内核是64，听着不低吧，但现在我用的edge游览器谷歌内核是114。而在最新版的vite中，他的给出的现代游览器版本是Chrome >=87 Firefox >=78 Safari >=13 Edge >=88
官网地址：https://cn.vitejs.dev/guide/migration-from-v2.html#modern-browser-baseline-change
正式开始：
nuxt3默认使用的是vite4+vue3，vite的官网也给出了vite兼容低版本的方案是legacy插件，https://github.com/vitejs/vite/tree/main/packages/plugin-legacy，下面就使用legacy的两种方案
方案1（官方版）：
据我所知，但具体哪个版本我不知道，我所知道的是3.5开始nuxt就取消了直接在项目根目录下创建vite.config.ts的操作，改成了在nuxt.config.ts中写vite配置了，我在nuxt3.0的时候是直接写在根目录下的，这次写了不生效，翻了官网才发现取消了，麻了
导入legacy：
pnpm i -D @vitejs/plugin-legacy
在nuxt.config.ts中加入内容，可以根据你的项目加入一些polyfill的模块
vite: {build: {target: ['es2015', 'chrome52'],},plugins: [legacy({targets: ["chrome 49"],renderLegacyChunks: false,modernPolyfills: ['es.global-this', 'es/object', 'es/array']})]},hooks: {'build:manifest': (manifest) => {// vite polyfills 被错误地加载到最后，所以我们必须将它们移动到对象中的第一个位置。// 我们不能完全替换 `manifest`，因为这样我们只是改变了一个局部变量，而不是实际的 manifest// 这就是为什么我们必须改变引用的原因。// 由于 ES2015 对象字符串属性顺序或多或少是有保证的 - 顺序是按时间顺序排列的const polyfillKey = 'vite/legacy-polyfills'const polyfillEntry = manifest[polyfillKey]if (!polyfillEntry) returnconst oldManifest = { ...manifest }delete oldManifest[polyfillKey]for (const key in manifest) {delete manifest[key]}manifest[polyfillKey] = polyfillEntryfor (const key in oldManifest) {manifest[key] = oldManifest[key]}}},
需要注意的是，我们可能会在nuxt.config.ts中加入css，当我们使用legacy进行兼容的时候，可能会出现css不被打包的问题，至少在我的项目中出现了，这时候你可以将你的css改到app.vue中进行导入，这样就可以避免css不被打包的问题。
方案二（社区issue中的不知名大佬的插件）
这个工具是我偶然看到的，官方issue有一个关于兼容性的讨论，下面有一个大佬发布了自己的插件，发布一周，个位数的star
issue地址：https://github.com/nuxt/nuxt/issues/15464
插件地址：https://github.com/IlyaSemenov/nuxt-vite-legacy
我觉得这个看见还是不错得，虽然发布没几天，但胜在操作简单，如同vue3一样
导入插件
pnpm install nuxt-vite-legacy
nuxt.config.ts中导入
modules: ["nuxt-vite-legacy"],legacy: {targets: ["chrome 49"],renderLegacyChunks: false,modernPolyfills: ['es.global-this', 'es/object', 'es/array']}
