关于Nuxt3.6兼容低版本游览器的实战以及可能存在的问题

news2024/12/30 3:39:25

当我们网站打包上线后，有些问题我们肯定也要考虑在内，兼容性也是其中一个重要的一种，可能会有人说，都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
在这里插入图片描述
我觉得这个看见还是不错得，虽然发布没几天，但胜在操作简单，如同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']
  }