vue-i18n数组翻译失效怎么办？一文搞懂替代方案

vue-i18n 新版数组翻译指南

问题陈述

在 vue-i18n 的 9.9.0+ 版本中，数组翻译功能遭到了变动。传统的 $t 和 i18n.global.t 函数不再支持直接翻译数组消息，导致程序员无法如预期般使用数组翻译。

原因探究

目前尚不清楚官方为何对数组翻译功能进行更改，相关文档中也未提供详细解释。

替代方案

尽管数组翻译功能不再受支持，但仍有几种替代方案可供选择：

1. 直接访问 messages 对象

你可以直接访问 i18n.global.messages.value 对象来获取翻译后的消息。例如，对于翻译数组消息，可以使用以下代码：

const messages = i18n.global.messages.value[i18n.global.locale.value];
const translatedArray = messages['bar'];

2. 使用自定义指令

你可以创建一个自定义指令来处理数组翻译。以下是一个示例指令：

Vue.directive('translate-array', {
  bind(el, binding, vnode) {
    const locale = vnode.context.$i18n.global.locale.value;
    const messages = vnode.context.$i18n.global.messages.value[locale];
    const key = binding.arg;
    const text = messages[key];
    if (Array.isArray(text)) {
      el.textContent = text.join(', ');
    }
  }
});

然后，你可以在模板中使用该指令，如：

<p v-translate-array="bar"></p>

3. 使用外部库

一些外部库可以帮助你处理数组翻译。其中一个流行的选项是 vue-i18n-array。

总结

虽然 vue-i18n 中的数组翻译功能不再受支持，但有几种替代方案可供选择。你可以直接访问 messages 对象，创建自定义指令，或使用外部库来实现数组翻译。选择哪种方法取决于你的具体需求和偏好。

常见问题解答

1. 为什么 vue-i18n 不再支持数组翻译？

官方并未提供有关此更改原因的明确解释。

2. 使用 messages 对象会影响性能吗？

直接访问 messages 对象通常不会对性能产生重大影响，因为它是一种轻量级的操作。但是，对于非常大的消息对象，可能会存在轻微的性能开销。

3. 自定义指令的优势是什么？

自定义指令的优势在于它提供了更多的灵活性。你可以根据需要自定义翻译逻辑，例如加入对缺失翻译项的处理或提供自定义分隔符。

4. 推荐使用哪种替代方案？

最佳替代方案取决于你的具体需求和项目。如果你需要一个简单的解决方案，直接访问 messages 对象可能就足够了。对于需要更多灵活性或自定义的项目，自定义指令或外部库可能更合适。

5. 有其他替代方案吗？

除了上面提到的替代方案之外，你还可以考虑将数组消息转换为嵌套的 JSON 对象，并使用 vue-jsonpath 之类的库来解析它。