antd-vue按需引入出错

通过vue脚手架3安装antd-vue

vue add ant-design

开始配置按需引入配置

babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件，如果需要样式自动加载那么要先装这个插件

npm install babel-plugin-import --dev 

安装完后需要配置babel.plugin.config文件，完全安装官方文档做

module.exports = {
    "presets": [
        "@vue/cli-plugin-babel/preset"
    ],
    "plugins": [
        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style:true}
        ]
    ]
}

新建一个antd.js文件，把需要的组件引入进来

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

在main.js中引入ants.js文件，配置完毕

结果

运行就报错

微信图片_20191118170609.png

解决办法

TMD后面发现官方文档有bug,上面配置babel.config.js文件配置有问题

        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style:true}
        ]

这个style的值不是true，把他改成css，重新运行就好了

    {libraryName: "ant-design-vue", libraryDirectory: "es", style:"css"}

TMD,老子花了几个小时就找这个bug。