Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！

1 插件安装准备

• ant-design-vue
• babel-plugin-import

yarn add ant-design-vue babel-plugin-import

2 项目配置

2.1 babel.config.js

plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true, // 官网只写css
      },
    ],
  ],

2.2 vue.config.js

引入css样式文件必须在这里配置下面内容：防止不支持内嵌js报错。

css: {
    loaderOptions: {
      less: {
        // 自定义主题样式
        // modifyVars: {
        //   'primary-color': '#41B883',
        //   'link-color': '#41B883',
        //   'border-radius-base': '2px'
        // }
        // 解决ant-vue引入不被允许的内嵌js问题
        javascriptEnabled: true,
      },
    },
  },

3 按需引入Ant-Design-Vue模板

import {
  ConfigProvider,
  Layout,
  Input,
  InputNumber,
  Button,
  Switch,
  Radio,
  Checkbox,
  Select,
  Card,
  Form,
  // FormModel,
  Row,
  Col,
  Modal,
  Table,
  Tabs,
  Icon,
  Badge,
  Popover,
  Dropdown,
  List,
  Avatar,
  Breadcrumb,
  Steps,
  Spin,
  Menu,
  Drawer,
  Tooltip,
  Alert,
  Tag,
  Divider,
  DatePicker,
  TimePicker,
  Upload,
  Progress,
  Skeleton,
  Popconfirm,
  PageHeader,
  Result,
  Statistic,
  Descriptions,
  message,
  notification,
  Collapse,
  Timeline,
  AutoComplete,
  Transfer,
  TreeSelect,
  Pagination,
  Tree,
  Cascader,
  Anchor,
  Carousel,
  BackTop,
  Empty,
} from 'ant-design-vue'

export const AntVue = (app) => {
  app.use(ConfigProvider)
  app.use(Layout)
  app.use(Input)
  app.use(InputNumber)
  app.use(Button)
  app.use(Switch)
  app.use(Radio)
  app.use(Checkbox)
  app.use(Select)
  app.use(Card)
  app.use(Form)
  // app.use(FormModel);
  app.use(Row)
  app.use(Col)
  app.use(Modal)
  app.use(Table)
  app.use(Tabs)
  app.use(Icon)
  app.use(Badge)
  app.use(Popover)
  app.use(Dropdown)
  app.use(List)
  app.use(Avatar)
  app.use(Breadcrumb)
  app.use(Steps)
  app.use(Spin)
  app.use(Menu)
  app.use(Drawer)
  app.use(Tooltip)
  app.use(Alert)
  app.use(Tag)
  app.use(Divider)
  app.use(DatePicker)
  app.use(TimePicker)
  app.use(Upload)
  app.use(Progress)
  app.use(Skeleton)
  app.use(Popconfirm)
  app.use(PageHeader)
  app.use(Result)
  app.use(Statistic)
  app.use(Descriptions)
  app.use(Collapse)
  app.use(Timeline)
  app.use(AutoComplete)
  app.use(Transfer)
  app.use(TreeSelect)
  app.use(Pagination)
  app.use(Tree)
  app.use(Cascader)
  app.use(Anchor)
  app.use(Carousel)
  app.use(BackTop)
  app.use(Empty)

  app.config.globalProperties.$message = message
  app.config.globalProperties.$notification = notification
  app.config.globalProperties.$confirm = Modal.confirm
  app.config.globalProperties.$info = Modal.info
  app.config.globalProperties.$success = Modal.success
  app.config.globalProperties.$error = Modal.error
  app.config.globalProperties.$warning = Modal.warning

  process.env.NODE_ENV !== 'production' &&
    console.warn('ant design use lazy-load !')
}

4 main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import { AntVue } from './utils/ant-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(store)
app.use(router)
AntVue(app)
app.mount('#app')