携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
事情是这样的，产品要求此次项目是原生app，就一下想到了用Hybrid混合开发的方式，安卓原生提供个壳，嵌入weview，就可以实现了，以防万一，产品以后还要H5，分分钟就能给到。 正好最近也在用vue3+ts+vite开发项目，这个项目也一样，结果就遇到坑了。
这篇文章记录一下，希望大家以后可以避坑。
现象
经历一段漫长而又煎熬的时间，此处省略一万字……
项目开发完成，这时找个公司的安卓机测试一下，不错不错，正常运行，用例执行完成，心里美滋滋，终于可以放松几天了。
心想这不身为一个合格的前端，需要考虑全嘛，兼容其他的设备，于是就找了个安卓x5内核的平板，好家伙，不打开不知道，一打开就吓了一大跳，页面空白，这下歇菜咯，好日子来了……
相信此时的你，一定能体会我此时的心情，好了好了，废话不多说，直接上正题。
分析
看到现象很容易可以猜出，一定是JS报错导致页面渲染阻塞了。
这时候很容易想到当前的浏览器不认识Es6的语法和新的api，因为在高版本的浏览器是没有问题的，这时有个猜想，vite在打包后的文件没有提供兼容性的支持，为了验证这个猜想，访问了一下webback打包后的项目，结果可以，因为我们引入了babel-polyfill，这下更能验证我的猜想了，果然是vite默认没有引入这样的插件。
解决过程
这时打开了官网vite插件部分看了看，好家伙，有个插件@vitejs/plugin-legacy它是为打包后的文件提供传统浏览器兼容性支持，好吧好吧，那我自己安装一下吧。
pnpm i @vitejs/plugin-legacy | npm i @vitejs/plugin-legacy
pnpm i terser
看到熟悉的提示，我立马的运行了一下，好家伙又报错……
接着我网上查了一下，好像是需要支持ESM模块化规范，立马打开了package.json，加了一下type:module，node默认CommonJS规范。
提示：如果这个时候运行，有报一些插件不支持的提示，请把require引入的模块，改为import的方式导入就OK了
然后在我的vite.config.ts使用一下这个插件，并且加一个build配置项target:es2015,意思就是设置最终构建的浏览器兼容目标为es2015（es6）
详情的话看一下build构建选项
具体插件的配置和使用可看一下官网 [@vitejs/plugin-legacy使用介绍] (github.com/vitejs/vite…)
做完了这些，我心里暗自窃喜，这下总该行了吧，一运行，嗯嗯没有问题，正常
突然觉得自己还是有几把刷子的，立马打包发测试环境，
在打包的过程中，哦豁！又报错了……瞬间打脸……
网上一查，这个@vitejs/plugin-legacy插件需要我当前的vite版本是3.0.0以上，我查看了一下我当前的vite版本是2.9.9，我立马升级到3.0.0的版本，这时心想，这下弄好总该行了吧
一运行，好家伙，又报错，这次心态彻底崩了……
安慰好我受伤的小心灵后，仔细看了看错误以及前面日志发现@vitejs/plugin-vue未满足vite@^2.5.10，可是我这时，vite已经升到3.0.0了
没办法，这是你逼我的，不要怪我，我只能给你做个升级
接着我就查看了一下@vitejs/plugin-vue现在最新版本是3.0.3，而现在我的是^2.3.3，意思是2版本的最新版，一顿猛的操作，安装好了。
pnpm i @vitejs/plugin-vue@3.0.3
二话不说，立马运行，说实话vite运行起来真快，此时的我都还没来得及反应，就运行成功了，看到这个，这下终于可以松一口气。
这次终于不报错了，接着就迅速的进行打包。打包完成后，看了看dist文件夹里面的index.html，发现了一些新朋友
简单介绍一下，就是script的引入方式有两种，检测当前浏览器支持原生ESM时，加载<script type="module"></script>，而对于低版本的浏览器会加载<script nomodule></script>相应的JS。
这下终于解决了,嘿嘿嘿！
经历过前面的过程，还是眼见为实。
这时用之前的平板访问我的项目，让我看到了期待已久的画面……
总结
遇到这类问题很大情况就是JS报错导致渲染阻塞，了解浏览器渲染过程的同学，可以很容易想到，不过具体也要看实际情况。
遇到问题，找到了原因，在顺藤摸瓜，经历思考和分析，一步步去挖掘，最后应该都是可以解决的。
最后，我想说的是，其实问题的本身并不可怕，可怕的是我们敢不敢去面对，不仅是工作方面，生活方面同样如此，当问题解决的时候，会带来不一样的感觉，希望和我一样刚毕业不久的你，不会惧怕困难，一起加油！
