nuxt3-vite-legacy

Nuxt3兼容低版本浏览器的Vite插件

使用说明

1. 安装:

npm i -D nuxt3-vite-legacy

2. 在nuxt.config.ts中引入:

import legacy from "@vitejs/plugin-legacy"
export default defineNuxtConfig({
  modules: ["nuxt3-vite-legacy"],
  vite: {
    plugins: [
      legacy({
        targets: ["Chrome>=51", "iOS>=10"],
        renderLegacyChunks: !0,
        // 常用的polyfills
        // modernPolyfills: ["es.global-this", "es.object.from-entries", "es.array.flat", "es.array.flat-map"],
        // 需安装mdn-polyfills包
        // additionalModernPolyfills: ["mdn-polyfills/Element.prototype.getAttributeNames"],
      })
    ]
  }
})

3. 配置(非必须):

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      edge: 88,
      firefox: 78,
      chrome: 87,
      safari: 14
    }
  }
})

@vitejs/plugin-legacy在浏览器端动态插入script，来进行浏览器检测和动态引入资源，在Nuxt3下会导致水合错误。而如果不在浏览器端进行检测，那么兼容性只能做到大概的判断，无法完全精准。

nuxt3-vite-lagacy在服务端通过ua进行浏览器兼容大概判断，默认全部运行兼容逻辑，可以通过runtimeConfig.public.chrome/safari/edge/firefox(如上例，与Vue3对齐)进行个性配置，根据浏览器和平台进行判断，只有<=runtimeConfig.public.chrome/safari/edge/firefox配置值时才运行兼容逻辑。

其它说明

nuxt3-vite-legacy对页面引入的资源做了优化，剔除了legacy构建后引入的冗余资源，关键资源进行预加载，对路径做了一些处理以便支持本地预览和PM2部署。