编程环境:Vite+Ts+ArcoDesign+Vue3
问题描述:在本地编译时任意浏览器均可弹出弹窗,但是经编译上线后弹窗就在部分浏览器(360、奇安信等)弹不出来弹窗;
解决过程:经过研究发现编译后弹不出弹窗,但是弹窗已经实际被渲染到Dom中,只不过在经过打包编译时将css样式top:0;bottom:0;right:0;left:0;这四个属性合并成为了inset:0;
因为Vite默认会按照es2020标准来编译,大多数浏览器的内核根本没有达到此标准。
当然合并代码本身是没有问题,但是inset属性有兼容性问题,导致inset在部分浏览器中无法识别该属性,让弹窗没有居中定位,产生了弹窗没有弹出来的错觉!
解决办法:在打包配置中添加一行代码
mode: 'production',
plugins: [],
build: {
cssTarget: 'chrome83', // 将编译的css版本进行chrome83版本适应
}
使用新技术就会产生浏览器兼容问题