项目场景:
将老的vue2项目更新到vue3,vue-i8n也更新到v9版本以上后,发现改动还是挺大的
具体迁移工作参考官网:vue-i18n: Migration from Vue 2
问题描述:
改动的细节很多,此文仅涉及 Translation API 的问题
v9后,$t()
将仅返回字符串,数组及对象会直接返回其属性名
原因分析:
官方解释:
“Reason: To make simple obligation to return the translation results, and it’s also to support TypeScript types.”
解决方案:
解决的方案也很简单,使用新的api替换即可,$t
=> $tm
$t
仍然可以使用,但仅返回字符串
另外,将数组、对象转换成JSON字符串,用的时候再解析。这种方案是不推荐的
cn.js:
test: JSON.stringify([{
key: 'k',
value: 'v'
}]),
console.log(JSON.parse(this.$t('test')))
结果:虽然不会产生bug,但解析中可能会产生异常信息