vant引用babel-plugin-import实现自动按需引入组件时报错

vuecli3 babel.config.js 中配置

module.exports = {
 plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
    presets: [
        '@vue/app'
    ]
}

然后直接使用代码

    <template>
    <div class="about">
        <h1>This is an about page</h1>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
    </div>
</template>

<script>
import { Button } from 'vant';
</script>

会报错 Cannot set property 'render' of undefined

解决方案

需要在 main.js 里面注册需要使用的控件：

import { Button } from 'vant';
import 'vant/lib/index.css';

Vue.use(Button);