项目版本：antdv：4.1.2,vue:3.4.19,vite:5.1.3

打开antdv的官网，我们可以看到其对环境的兼容情况

由于我手上的项目需要部署的是73版本的谷歌，部署上去之后发现，antd的表格，表单，按钮，样式全都失效，十分丑陋。于是开始找解决办法。翻阅官方文档后，发现可用如下方法解决样式兼容

App.vue代码如下：

<template>
  <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
    <AppProvider>
      <!-- {{ currentEnv }} -->
      <!-- 开发环境不需要样式降级，否则会报错 -->
      <RouterView v-if="currentEnv === 'development'" />
      <!-- 发布到生产环境需要解开以下兼容性代码 -->
      <div v-else>
        <StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
          <RouterView />
        </StyleProvider>
      </div>
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
import { AppProvider } from '@/components/Application';
import { useTitle } from '@/hooks/web/useTitle';
import { useLocale } from '@/locales/useLocale';
import { ConfigProvider, StyleProvider } from 'ant-design-vue';
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue';
import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
import 'dayjs/locale/zh-cn';
import { computed,onMounted,ref } from 'vue';

// support Multi-language
const { getAntdLocale } = useLocale();

const { isDark, darkTheme } = useDarkModeTheme();

const themeConfig = computed(() =>
  Object.assign(
    {
      token: {
        /** 
         * app内部的颜色依赖注入，适用于组件的默认背景色，改动后可直接生效
         */
        colorPrimary: '#1890FF',
        colorSuccess: '#55D187',
        colorWarning: '#EFBD47',
        colorError: '#ED6F6F',
        colorInfo: '#1890FF',
      },
    },
    isDark.value ? darkTheme : {},
  ),
);
/** 当前环境变量 */
const currentEnv = ref(import.meta.env.MODE);

onMounted(() => {
console.log('currentEnv', currentEnv.value);
  
})
useTitle();
</script>

再次部署，表格和表单样式正常，但是message的样式没出来，这个后面再调。未完待续。。。

4月18日更新，message和modal样式兼容配置解决办法。

由于在上文中设置了全局的样式降级，在各个组件中使用时，用静态方法调用的方法将不能正常挂载message实例，因为获取不到全局的configProvider，解决办法：使用官方提供hooks方式调用。modal组件同理,并在组件中放上contextHolder组件以获取provider。代码如下：

<template>
  <div class="my-container">
      <contextHolder />
      <modalContext />
  </div>
</template>
<script setup lang="ts">
import { message,Modal } from 'ant-design-vue'
const [messageApi, contextHolder] = message.useMessage();
const [modal, modalContext] = Modal.useModal();
const test = ()=>{
    messageApi.success('编辑成功').then(()=>{
      loading.value = false
      isFormSubmit.value = true
      backToIndex()
    })
}
const test2 = ()=>{
    modal.confirm({
      title: '你填写的内容还未保存，确定关闭此页面吗？',
      icon: createVNode(ExclamationCircleOutlined),
      // content: createVNode('div', { style: 'color:red;' }, 'Some descriptions'),
      onOk() {
        okCallback()
      },
      centered: true,
      onCancel() {
        cancelCallback && cancelCallback()
      },
      class: 'test',
    });
}
</script>

需要注意的是，messageApi返回一个promise，可以在.then的回调中进行后续逻辑，更严谨一点。