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 吧~

原创文章,作者:6024010,如若转载,请注明出处:https://blog.ytso.com/231469.html

(0)
上一篇 2022年1月16日
下一篇 2022年1月16日

相关推荐

发表回复

登录后才能评论