一、背景
由于Ant Design Vue 支持最近 2 个版本的现代浏览器。而360极速浏览器最新的内核版本为86.xx,而 :where选择器只支持88.xx以上的版本内核(可以在caniuse查看兼容设备),导致页面显示异常。
二、解决办法
根据官网建议,进行降级处理。具体代码如下:
js
import { ConfigProvider, StyleProvider, legacyLogicalPropertiesTransformer } from 'ant-design-vue';
<ConfigProvider :theme="themeStore.antdTheme" :locale="antdLocale">
<AppProvider>
<StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
<RouterView class="bg-layout" />
</StyleProvider>
</AppProvider>
</ConfigProvider>
遇到的问题
发现message的样式仍然还有 :where选择器,后续发现是我的AppProvider里面对message, modal, notification进行了处理,应该也包含在StyleProvider里面。改动如下
js
<StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
<AppProvider>
<RouterView class="bg-layout" />
</AppProvider>
</StyleProvider>
同时发现之前写的unocss样式不生效了
想办法提升一下unocss的权重,将unocss权重提升,通过查阅文档发现可以改unocss模式
改完之后发现import 'uno.css';导入找不到了,手动将这个css文件内容复制下来,本地创建一份,同时改引入路径,去掉import 'uno.css',改成import '../styles/css/uno.css';
调试
不想频繁打包,可以在本地打包之后,使用http-server启动一个服务,因为我们的项目都是基于sso,使用keyclock,登录需要配置ip白名单,并且指定端口,例如http-server -p 9527 本项目基于SoybeanAdmin AntDesignVue 版本