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

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

相关推荐
YCOSA202517 分钟前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白23 分钟前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
失散1336 分钟前
分布式专题——23 Kafka日志索引详解
java·分布式·云原生·架构·kafka
西红柿维生素39 分钟前
CPU核心数&线程池&设计模式&JUC
java
云虎软件朱总39 分钟前
配送跑腿系统:构建高并发、低延迟的同城配送系统架构解析
java·系统架构·uni-app
吃饺子不吃馅1 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
18538162800余+1 小时前
深入解析:什么是矩阵系统源码搭建定制化开发,支持OEM贴牌
java·服务器·html
李昊哲小课1 小时前
Spring Boot 基础教程
java·大数据·spring boot·后端
code123131 小时前
tomcat升级操作
java·tomcat
TanYYF1 小时前
HttpServletRequestWrapper详解
java·servlet