| 关于Nuxt3.6兼容低版本游览器的实战以及可能存在的问题 | 您所在的位置：网站首页 › ios谷歌内核浏览器 › 关于Nuxt3.6兼容低版本游览器的实战以及可能存在的问题 |
关于Nuxt3.6兼容低版本游览器的实战以及可能存在的问题
|
当我们网站打包上线后，有些问题我们肯定也要考虑在内，兼容性也是其中一个重要的一种，可能会有人说，都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) return const oldManifest = { ...manifest } delete oldManifest[polyfillKey] for (const key in manifest) { delete manifest[key] } manifest[polyfillKey] = polyfillEntry for (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 nuxt.config.ts中导入 modules: ["nuxt-vite-legacy"], legacy: { targets: ["chrome 49"], renderLegacyChunks: false, modernPolyfills: ['es.global-this', 'es/object', 'es/array'] } |
我觉得这个看见还是不错得，虽然发布没几天，但胜在操作简单，如同vue3一样 导入插件【本文地址】