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

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

相关推荐
超人不会飛2 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦5 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想7 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景12 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z16 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982421 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴27 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干30 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗32 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
云动雨颤34 分钟前
Java并发性能优化|读写锁与互斥锁解析
java