antdv@4.x在360极速浏览器兼容解决办法

一、背景

由于Ant Design Vue 支持最近 2 个版本的现代浏览器。而360极速浏览器最新的内核版本为86.xx，而 :where选择器只支持88.xx以上的版本内核（可以在caniuse查看兼容设备），导致页面显示异常。

二、解决办法

根据官网建议，进行降级处理。具体代码如下：

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里面。改动如下

<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 版本