vue引入组件vant组件Dialog报错的解决方案

vue脚手架引入了vant组件，我采用的是按需导入，在局部组件用到时，就在局部调用，其它组件局部调用都没什么问题，但当我用到了Dialog组件时就报错了，局部调用Dialog的代码如下：

 import {Field,Picker,Popup,Button,Dialog  } from 'vant'

components:{
          [Aber.name]: Aber,
          [ Field.name]:  Field,
          [ Picker.name]:  Picker,
          [ Popup.name]:  Popup,
          [ Button.name]:Button,
          [ Dialog .name]:Dialog ,
     }

当我刷新网页的时候就报错了，报错如下图：

解决方法如下：

不要在局部组件引用Dialog组件，在全局main.js文件中引入Dialog（这里强调一下Toast也是在全局中引入）引入如下：

import {Dialog, Toast} from 'vant';

Vue.use(Dialog)
Vue.use(Toast);

然后运行再刷新下页面应该就可以解决问题了。