# 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", {edge: 79, firefox: 78, chrome: 87, safari: 12}]], // 参数非必须
  vite: {
    plugins: [
      legacy({
        targets: ["Chrome>=51", "iOS>=10"],
        renderLegacyChunks: true,
        // 常用的polyfills
        // modernPolyfills: ["es.global-this", "es.object.from-entries", "es.array.flat", "es.array.flat-map"],
        // 需安装mdn-polyfills包
        // additionalModernPolyfills: ["mdn-polyfills/Element.prototype.getAttributeNames"],
      })
    ]
  }
})
```
`@vitejs/plugin-legacy`在浏览器端动态插入script，来进行浏览器检测和动态引入资源，在Nuxt3下会导致水合错误。而如果不在浏览器端进行检测，那么兼容性只能做到大概的判断，无法完全精准。
`nuxt3-vite-lagacy`在服务端通过ua进行浏览器兼容大概判断，默认全部运行兼容逻辑。可以通过传递参数`modules: [["nuxt3-vite-legacy", {edge: 79, firefox: 78, chrome: 87, safari: 12}]]`进行个性配置，根据浏览器和平台进行判断，只有<=chrome/safari/edge/firefox配置值时才运行兼容逻辑。

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