踩坑事件-Antd is not defined

背景

在尝试使用ant design of vue 时，根据官方文档使用babel-plugin-import 进行按需导入后，然后想切换为全局引入时，出现了Antd is not defined 错误

按需导入配置方式

1.安装插件

// 安装babel-plugin-import插件
cnpm i babel-plugin-import -D

2.配置babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 由于使用的是vue/cli3 所以需要在babel.config.js文件内添加插件信息
  // 然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
  plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]]
}

3.main.js文件按需引入

 import { Button } from 'ant-design-vue'
 Vue.use(Button)

4.在组件中可以直接使用button组件

<!-- 此时可以在组件中使用Button组件 -->
<a-button type="primary">你好</a-button>

全局导入配置

1.main.js文件全局导入

//导入组件
import Antd from 'ant-design-vue'
//导入样式
import 'ant-design-vue/dist/antd.css'
//引入
Vue.use(Antd)

此时由于先配置的按需导入，然后又改为全局引入。出现了babel-plugin-import与全局引入的冲突

解决方案

方案一：移除插件内容

从babel.config.js文件中移除 plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]] 配置信息

方案二：修改全局引入配置

import Antd from 'ant-design-vue'

改为

import Antd from 'ant-design-vue/es'