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

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

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

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

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

(1)vite-plugin-legacy

引入VITE的版本管理插件,但是会和vite-plugin-theme组件冲突,github的issue里有人提过这个问题,但是由于是额外引入的插件,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>

2.

为了统一 LTR 和 RTL 样式,Ant Design Vue 使用了 CSS 逻辑属性。例如原 margin-left 使用 margin-inline-start 代替,使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器(如 360 浏览器、QQ 浏览器 等等),可以通过 ant-design-vueStyleProvider 配置 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最新版本vue3的chrome兼容问题。

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

相关推荐
Micrle_0079 分钟前
java分布式场景怎么实现一个高效的 读-写锁
java·分布式
海上生明月丿14 分钟前
微服务01
java·spring boot·微服务
faimi18 分钟前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang1 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
Luke Ewin1 小时前
FunASR的Java实现Paraformer实时语音识别 | 一款无需联网的本地实时字幕软件
java·人工智能·语音识别·asr·funasr·paraformer·sensevoice
程序员码歌1 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
叫我阿柒啊1 小时前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
望未来无悔1 小时前
系统学习算法 专题十八 队列+宽搜
java·算法
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架