Rails+Vue.js 实例上是否有 I18n 在单个存储库中共享语言环境？

Question

我们正在引入 Vue.js 来管理前端。同时，我们正在考虑采用其他方式来管理整个应用程序堆栈中的 I18n。

最初计划的解决方案是使用 gettext 实现，如fast_gettext。但是由于 Vue.js 的到来，一个额外的限制是能够为传统的 Rails 视图和 Vue.js 呈现的元素使用相同的语言环境存储库。

一种可能的有效解决方案是有一种方法来执行类似于 erb 文件可能执行的操作的 rails 代码。

有关信息，Vue.js 是通过 webpacker 安装的，因为我们发现的 gems 似乎已经过时。

Answer 1

您可以使用i18n-js.
https://github.com/fnando/i18n-js

它允许您使用config/localeyaml 文件，就像它们是 vue 代码的一部分一样。按照项目页面上的安装说明进行操作后，您可以创建一个像这样的 mixin：

export default {
  methods: {
    t: (...args) => I18n.t(...args),
    currentLocale: () => I18n.currentLocale()
  }
}

像这样导入：

<template></template>

<script>
import i18n from "../mixins/i18n"

export default {
  mixins: [i18n]
}
</script>

并像这样使用：

<button @click="toggleItem(content)">
  <span v-if="isSelected">
    {{ t("remove") }}
  </span>
  <span v-else>
    {{ t("add") }}
  </span>
</button>