vue-i18n升级后的bug

87 阅读1分钟

场景:vue-i18n从9.4.1升级到9.6.4后,会出现一个key匹配不到文本的情况。

原因:createI18n(options)中的options配置项中有一个flatJson属性,默认为false,表示是否嵌套处理key。

项目中的配置信息如下:

    zh: {
      "a.b.c.d.e.f": "你的名字ffff",
      "a.b.c.d.e": "你的名字",
    },

如果a.b.c.d.e.f 写在a.b.c.d.e上面并且将flatJson设置为true,那么界面a.b.c.d.e.f对应的字段就会有显示问题。如下所示。

image.png

flatJson设置为true时,将实例中的messages信息打印出来如下,a.b.c.d.e.f对应的字段消失了。导致页面显示出问题。

image.png

如果将a.b.c.d.e调整至上方,再次打印messages信息如下,会多出一个a.b.c.d.e.f的属性。此时界面正常显示中英文。

image.png 总结

  1. 如果没有使用messageResolver那么建议将flatJson设置为false。 image.png
  2. 规范中英文json配置文件的书写。将短的子串写法上方。