使用@vue/compat迁移Vue3时ant-design-vue报getPrefixCls未定义错误

使用@vue/compat兼容性构建配合Vite迁移至Vue3过程中，控制台抛出以下错误：

empty.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'getPrefixCls')

已尝试切换ant-design-vue的2.2.8和3.2.20版本，问题仍未解决。

使用的依赖版本 #

"vue": "3.3.4",
"vite": "4.3.9",
"ant-design-vue": "2.2.8",
"@vue/compat": "3.3.4",
"@originjs/vite-plugin-commonjs": "1.0.3",
"@vitejs/plugin-vue": "4.2.3"

vite.config.js 配置 #

import { defineConfig } from 'vite'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import path from 'path'
import { fileURLToPath } from 'url'
import vue from '@vitejs/plugin-vue' // Vue 3
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

const namelessClasses = () => ({
    name: 'nameless-classes',

    transform(code, importName){

        if (!importName.endsWith('.vue')){
            return null;  // Only applicable to regular vue file imports
        }

        // Form class name from cleaned filename
        let class_name = importName.split(path.sep).pop()
            .slice(0, '.vue'.length * -1)
            .replace(/[^a-zA-Z]/g, '')

        return code.replace('export default class extends Vue', `export default class ${class_name} extends Vue`)
    }
})

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    compatConfig: {
                        MODE: 2,
                        // MODE: 3,
                    }
                }
            }
        }),
        namelessClasses(),
        viteCommonjs({exclude: ['auth0-js']}, /* { skipPreBuild: true } */),
        Components({
            resolvers: [
                AntDesignVueResolver({
                  importStyle: 'less',
                }),
            ],
            dts: true,
            include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.jsx$/]
        })
    ],
    server: {
        port: 8080
    },
    resolve: {
        alias: {
            vue: '@vue/compat',
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            '~assets': fileURLToPath(new URL("./src/assets", import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
                additionalData: '@root-entry-name: default;',
            },
        },
    },
})

package.json 配置 #

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "export NODE_OPTIONS=--openssl-legacy-provider && vite",
        "vite": "vite",
        "build": "vite build --mode production",
        "build:staging": "vite build --mode staging",
        "lint": "eslint src"
    },
    "dependencies": {
        "@ant-design/icons-vue": "^6.1.0",
        "@microsoft/teams-js": "1.7.0",
        "@vue/compat": "3.3.4",
        "ant-design-vue": "2.2.8",
        "apexcharts": "3.20.0",
        "auth0-js": "9.21.0",
        "axios": "1.4.0",
        "d3": "5.7.0",
        "date-fns": "2.15.0",
        "fast-array-diff": "0.2.0",
        "fsevents": "2.3.2",
        "http-status": "1.4.2",
        "lodash": "4.17.19",
        "moment": "2.24.0",
        "normalizr": "3.6.0",
        "portal-vue": "3.0.0",
        "uuid": "9.0.0",
        "vee-validate": "4.10.5",
        "vue": "3.3.4",
        "vue-apexcharts": "1.6.0",
        "vue-check-view": "0.3.0",
        "vue-class-component": "8.0.0-rc.1",
        "vue-color": "2.7.1",
        "vue-country-flag": "1.3.1",
        "vue-country-region-select": "2.0.16",
        "vue-facing-decorator": "2.1.20",
        "vue-i18n": "8.20.0",
        "vue-json-tree-view": "2.1.6",
        "vue-property-decorator": "^10.0.0-rc.3",
        "vue-router": "4.2.2",
        "vue-scrollto": "2.18.2",
        "vue-tribute": "1.0.6",
        "vue-tsx-support": "2.3.3",
        "vue2-editor": "2.10.2",
        "vuex": "4.1.0",
        "vuex-class": "^0.3.2",
        "vuex-router-sync": "6.0.0-rc.1",
        "vuex-smart-module": "0.3.4",
        "xlsx": "0.15.6"
    },
    "devDependencies": {
        "@originjs/vite-plugin-commonjs": "1.0.3",
        "@types/auth0-js": "^9.10.6",
        "@types/chai": "^4.1.0",
        "@types/lodash": "^4.14.138",
        "@types/mocha": "^5.2.4",
        "@types/stripe-v3": "^3.1.9",
        "@types/uuid": "^3.4.5",
        "@vitejs/plugin-vue": "4.2.3",
        "less": "^4.1.3",
        "less-loader": "^11.1.3",
        "sass": "1.63.6",
        "tslib": "2.6.0",
        "typescript": "5.1.3",
        "unplugin-vue-components": "^0.25.1",
        "vite": "4.3.9"
    }
}

解决方向 #

1. 确保根组件配置ConfigProvider #

Ant Design Vue的组件依赖全局配置上下文，在根组件中包裹ConfigProvider：

<template>
  <a-config-provider>
    <!-- 你的应用根组件 -->
    <router-view />
  </a-config-provider>
</template>

<script setup>
import { ConfigProvider } from 'ant-design-vue'
</script>

2. 调整自动导入组件的Resolver配置 #

针对使用的ant-design-vue版本，在unplugin-vue-components中指定版本：

Components({
  resolvers: [
    AntDesignVueResolver({
      importStyle: 'less',
      version: '3.x' // 如果你用的是3.x版本；2.x版本建议改用全局注册
    }),
  ],
})

如果是ant-design-vue@2.x（Vue2版本），暂时关闭自动导入，改用全局注册：

// 入口文件main.js
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

3. 优化Vue Compat模式配置 #

调整compatConfig，确保全局实例相关的兼容选项开启：

vue({
  template: {
    compilerOptions: {
      compatConfig: {
        MODE: 2,
        GLOBAL_MOUNT: true,
        INSTANCE_PROP: true,
        OPTIONS_API: true
      }
    }
  }
})

4. 移除Vue2专属组件干扰 #

项目中存在vue2-editor这类仅支持Vue2的组件，它们可能破坏Vue3的运行环境。建议替换为Vue3兼容的替代组件，或暂时移除这类组件验证问题是否解决。

5. 检查依赖冲突 #

执行npm ls vue或yarn list vue，确保项目中只有一个Vue版本，避免多个版本导致的实例混乱。

内容的提问来源于stack exchange，提问作者Evgeniy Voytenko