解决vue-i18n Cannot translate the value of keypath 'stateList.'. Use the value of keypath as default.

最新推荐文章于 2023-09-07 17:37:17 发布

原创最新推荐文章于 2023-09-07 17:37:17 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

随手记论文专栏收录该内容

33 篇文章

订阅专栏

本文探讨了在项目中使用i18n进行国际化时遇到的警告问题：Cannot translate the value of key path 'stateList.'。文章分析了警告产生的原因，即在动态生成的select中，由于源数据存在空值，导致语言列表中key值未被找到。同时，提供了两种解决方案：一是检查并修正数据源，确保无空值；二是通过设置i18n实例的silentTranslationWarn属性为true，隐藏警告。

项目中使用了i18n来解决国际化问题。碰到了警告：Cannot translate the value of keypath ‘stateList.’. Use the value of keypath as default.

百度了下，发现大多数都是配置i18n不显示警告的方式来解决，这不是掩耳盗铃么。

检查了下代码，发现其实是个很简单的问题：
在这里插入图片描述
如图，我在select中使用了i18n的$t函数，去匹配我的语言列表。但是这块的select是动态生成的，

源数据中存在空的情况，导致语言列表中有空值。$t找不到对应的key。所报的警告。

简单来说，就是$t(key),使用的时候key没有找到对应的值所报的警告。

不过对于特殊情况，可能隐藏警告也会有意义吧。所以还是列一下另一种简单粗暴的方式：

const i18n = new VueI18n({
  locale: lang, 
  messages, 
  // 隐藏警告
  silentTranslationWarn: true
});