「时光不负，创作不停，本文正在参加2021年终总结征文大赛」
背景
之前尤大发布了vue3.0，想着刚发布，缓一缓不学也行，吃一下老本，应该能划水到明年吧。
什么！听说最近又发布了vue3.2，还说 <script setup> + TS + Volar = 真香，看来不学不行啊
机缘巧合之下，公司要开一个小项目，那不是天助我也(领导说拥抱新技术)( ｡ớ ₃ờ)ھ
我不管三七二十八，直接Vite + Element-plus + TS + Volar，三扒两下，毕竟我cv工程师称号也不是盖的，开发过程中vite真的很丝滑
优势
-
页面基本上都是秒开
-
vue页面也不需要反复横跳了
-
页面一个this都没有
-
ts友好的类型提示
正文
结果发了第一个部署包过去，客户现场传来了一个坏消息
当时愣了一秒，思绪万千，想着在我这里好好的，怎么你使用就不行了呢，是不是打开姿势不对？左脚没有踏在右脚上？？
幸好机智的我马上问了一句用的是什么版本的浏览器，结果不出我所料，用的是chrome60版本的，我当时想死的心都有了，怎么现在还有人有这低版本浏览器
复现
马上下载一个60版本的浏览器，不知道chrome搞什么，刚下载下来就给我更新到95
后面网上找了办法禁止更新，然后在低版本浏览器上打开部署的系统，结果还真的是一片空白
寻原
定位问题---> vite?element-plus?
到vite官网翻了一下，发现描述如下
- 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持 —— 查看 构建生产版本 章节获取更多细节。
解决
在vite.config.ts添加配置
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
就这？？还以为万事大吉了，结部署后访问，又报了另外的错
纳尼想死的心都有了！！冷静下来细心排查，定位问题在element-plus身上
最后找到了一个支持ResizeObserver的包，在入口引用即可
import ResizeObserver from 'resize-observer-polyfill'
window.ResizeObserver = ResizeObserver
总结
出现bug不要慌，仔细排查，总有方案解决的
