使用 ant-design-vue@2.0 在 vue@3.0 报错: Can't resolve 'ant-design-vue/es/install'

[caoxiemeihao]

运行环境

{
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "ant-design-vue": "^2.0.0-rc.9",
    "vue": "^3.0.5",
    "vue-router": "^4.0.3"
  }
}

使用代码

import { createApp } from 'vue'
import { install } from 'ant-design-vue'
import router from '@va/router'
import App from './app'

const app = createApp(App)

app.use(router)
install(app) // 加载所有 antdv 组件
app.mount('#root')

webpack 配置

{
  test: /\.(ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-typescript'],
      plugins: [
        '@vue/babel-plugin-jsx',
        ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }],
      ],
    },
  },
}

控制台报错

✗ yarn start:vue
yarn run v1.22.4
$ node -r ts-node/register views-admin/scripts/start
[start] socket listen on port 9510.
[start] webpack 编译报错 2/6/2021, 3:46:31 PM
Module not found: Error: Can't resolve 'ant-design-vue/es/install/style/css' in '/Users/caoxie/Desktop/work1/mingjiujixie-node/views-admin'
Module not found: Error: Can't resolve 'ant-design-vue/es/install' in '/Users/caoxie/Desktop/work1/mingjiujixie-node/views-admin'

[caoxiemeihao]

解决思路

import { createApp } from 'vue'
import { Layout, install } from 'ant-design-vue'
import router from '@va/router'
import App from './app'

const app = createApp(App)

app.use(router)
+ app.use(Layout)
- install(app) // 加载所有 antdv 组件
app.mount('#root')