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兼容问题。

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

相关推荐
程序员良辰7 分钟前
URL与URI:互联网世界的“门牌号“与“身份证“
java·网络协议
ahauedu15 分钟前
Apache POI 依赖版本冲突导致 NoSuchFieldError: Factory 报错
java·maven·apache
运维帮手大橙子39 分钟前
字符串缓冲区和正则表达式
java·开发语言
橘颂TA44 分钟前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
丶小鱼丶2 小时前
栈算法之【有效括号】
java·算法
郝学胜-神的一滴3 小时前
SpringBoot实战指南:从快速入门到生产级部署(2025最新版)
java·spring boot·后端·程序人生
鼠鼠我捏,要死了捏5 小时前
Java 虚拟线程在高并发微服务中的实战经验分享
java·microservices·virtualthreads
武子康6 小时前
Java-82 深入浅出 MySQL 内部架构:服务层、存储引擎与文件系统全覆盖
java·开发语言·数据库·学习·mysql·spring·微服务
Rancemy6 小时前
rabbitmq 03
java·分布式·rabbitmq
守城小轩6 小时前
WebRTC指纹识别——未来展望(下篇)
chrome·webrtc·chrome devtools·指纹浏览器·浏览器开发