前言
vite在编译过程中,会默认按照es2020的标准来编译。在不同浏览器下会产生部分样式不兼容问题
如,弹窗中top: 0; right: 0; bottom: 0; left: 0;会被编译成inset: 0;,但是360极速浏览器等部分浏览器采用的Chrome内核比较老,还不识别inset,所以无法正常显示。
解决方法
只需要在vite.config.js中配置css的编译目标,设置成更早一点的标准即可,也可以直接设置成主流浏览器版本比如chrome83。
在项目配置文件中添加如下代码
build: {
cssTarget: 'chrome83', // 将编译的css版本进行chrome83版本适应
}