JEECGBOOT前端VUE3版本浏览器兼容支持chrome＞=76版本方法

embedded/2025/2/13 16:39:54/

JEECGBOOT最新的前端VUE3版本使用的

VITE最新版本+Ant design vue最新版本。

部署到生产环境以后发现，chrome76-100左右，CSS样式会乱掉失效，不太兼容，103以上的没问题。

尝试了三种方法，前两种都失败了，第三种+一些优化可以解决兼容性问题。

（1）vite-plugin-legacy

引入VITE的版本管理插件，但是会和vite-plugin-theme组件冲突，github的issue里有人提过这个问题，但是由于是额外引入的插件，jeecgboot>jeecgboot官方没法解决。

（2）babel ，成功引入了，把配置项加到了vite-config里，但是不生效，部署以后样式还是乱的。

（3）正解方法！！ANT-DESIGN-VUE的兼容性问题。

实际打开页面的时候，观察chrome76与chrome103版本页面的区别。乱掉的样式里

chrome76没有where选择器的样式，chrome103有。因此确定是CSS问题。

首先参考官方文档

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

Ant Design Vue 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 StyleProvider 取消默认的降权操作：

// `hashPriority` 默认为 `low`，配置为 `high` 后， // 会移除 `:where` 选择器封装
<template><a-style-provider hash-priority="high"><MyApp /></a-style-provider>
</template>

为了统一 LTR 和 RTL 样式，Ant Design Vue 使用了 CSS 逻辑属性。例如原 margin-left 使用 margin-inline-start 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器等等），可以通过 ant-design-vue 的 StyleProvider 配置 transformers 将其转换：

// `transformers` 提供预处理功能将样式进行转换
<template><a-style-provider :transformers="[legacyLogicalPropertiesTransformer]"><MyApp /></a-style-provider>
</template><script lang="ts" setup>import { legacyLogicalPropertiesTransformer } from 'ant-design-vue';
</script>

这个时候大部分样式都正常了，

但是会导致Modal右上角的X按钮位置偏移。

Modal偏移，将vite-modal-close 的 width改成 auto !important

登录页面的验证码按钮样式错乱

将登录按钮加一个 margin-top：70px；

这样基本解决了jeecgboot>jeecgboot最新版本vue3的chrome兼容问题。

但是还是有部分样式有点问题，需要慢慢调整。