Vue项目使用Ant Design升级后报错`LocaleProvider` is deprecated的解决方法

今天重写一个 Vue 项目，使用的是 Ant Design for Vue 框架，发现 Collapse 折叠面板的 expand-icon-position 属性不能用。

将小箭头设置在右侧不生效，代码如下：

<a-collapse :bordered="false" expand-icon-position="right">
  <a-collapse-panel header="公司选择">
    w3h5.com
  </a-collapse-panel>
</a-collapse>

检查了一下 Ant Design for Vue 版本是1.4.x ，线上稳定版本是 1.6.3 ，盲猜是新加的功能。

更新/升级 Ant Design for Vue 版本：

npm install ant-design-vue --save

我使用的是 npm ，如果你习惯用 yarn ，可以执行如下命令：

yarn add ant-design-vue

更新成功，首先是报了一堆错误，下面是截取的部分，包括 moment 的路径错误：

 error  in ./node_modules/moment/locale/zh-cn.js

Module build failed: Error: ENOENT: no such file or directory, open 'D:\vue\rencaiyoujia\node_modules\moment\locale\zh-cn.js'

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 16:0-29
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/moment/moment.js

重新启动项目，正常运行，不再报错了。

但是 console 控制台又报错：warning.js?49ae:7 Warning: [antdv: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead

原因出在 ant-design-for-vue 国际化组件，我之前整理过一篇文章：Antd Vue LocaleProvider国际化组件zh_CN中文配置

报错的意思的 `LocaleProvider` 已弃用。请改用 `locale` 和 `ConfigProvider` ；

修改一下写法，把 <a-locale-provider> 标签换成 <a-config-provider> ：

<a-config-provider :locale="zh_CN">
  <div id="app">
      <router-view></router-view>
  </div>
</a-config-provider>

这时候应该又会报另一个错误了：

vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <a-config-provider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

这个不难理解，因为我们使用了新的标签，但是还没有注册。

在 main.js 中引入并注册一下就好了：

import { ConfigProvider } from 'ant-design-vue';//引用
Vue.component(ConfigProvider.name, ConfigProvider);//注册

现在我们可以看到，报错已经消失了，继续愉快的 Coding 吧~

推荐阅读：

Animate.css动画库的安装与使用

html中引入调用另一个公用html模板文件的方法

Z-Blog 搜索报错：Cannot pass parameter 1 by reference 解决方法

【笔记】5.2学习小程序用到的网站和资料

li、img等元素设置inline-block后的空白间距问题