Vite项目打包后浏览器兼容性问题如何解决(vite,浏览器,开发技术)

慌不慌？你说慌不慌，慌！我也觉得慌，为什么？网上那么多人用这个方法成功了，但我们失败了，这能不慌？ Plan C，No！

Plan D：使用@vitejs/plugin-legacy插件/strong></p><p>以上三个方案失败后，我又重新回归到vite这一块，在vite官方文档中我找到了vite自带插件库，并且在插件库中找到了一个关于浏览器兼容支持的插件：@vitejs/plugin-legacy<br/首先安装插件：npm i @vitejs/plugin-legacy -D

然后在vite.config.js中配置

打包、运行到浏览器。

新版本浏览器运行正常！旧版本浏览器运行正常！Plan D，yes！/p><p>以下是@vitejs/plugin-legacy插件的简单介绍：<br/插件默认行为：br/>1.使用@babel/preset-env转换，为包中的每个块生成相应的遗留块。<br/2.生成一个包含 SystemJS 运行时的 polyfill 块。
3.使用

打包后的变化：

启用插件后打包完成的目录多出了一些带有legacy字样的文件，每个js脚本文件都有一个与其对应的遗留版本。

html文件中新增了一些脚本，这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字样的遗留版本文件。

此时当项目运行在一些版本较低的浏览器时，插件添加的脚本会自动加载legacy版本的文件。

在Plan D成功在低版本浏览器运行以后，发现有一些CSS样式显示不正常，随后确认是重写Vant的CSS变量没有生效。
刚开始认为是CSS在打包时没有做好兼容处理，然后就折腾了一番CSS的兼容支持。css解释器、postcss插件和vite配置css目标环境都没用。

后面就没有什么思路了，后来想起来在vite.config.js配置中有一个关于样式按需加载的插件：

此时就想是不是这个插件影响到了我的CSS的正常效果，当我把它移除并重新打包运行后，样式就回归正常了，看来确实是被它影响的。
使用这个按需加载的插件后，当页面加载时，它会根据它的一些规则去判断当前需要加载哪些样式文件，哪些不需要加载。在加载这些样式文件时，如果样式文件里有我们自定义全局样式重名的，那么根据css规则，我们自定义过的全局样式会被覆盖掉。
在本次的案例中，我们重写了Vant组件的部分变量，并全局引入了。在打开包含这些变量的页面时，按需加载插件此时才会加载Vant的样式文件，我们在全局重写的变量又被重写了，因此重写的全局变量没有生效。