vite + element-plus 兼容低版本浏览器

背景

技术栈: vite + vue3 + element-plus

开发环境: chrome95

部署环境: chrome60

填坑

因为vite 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入

第一个插件 @vitejs/plugin-legacy

打包后另外一个报错

element-plus使用了new ResizeObserver

第二个插件 resize-observer-polyfill

npm install resize-observer-polyfill -D

在main.js配置

// main.js
import ResizeObserver from 'resize-observer-polyfill'
window.ResizeObserver = ResizeObserver

细节: element-plus按需导入在低版本浏览器会有问题，有一些引入会缺失，全量导入就没问题