Rails+Vue.js项目中能否实现单仓库共享国际化(I18n)资源？

我来分享几个能让Rails视图和Vue.js共享gettext/i18n资源的实用方案，刚好能解决你提到的跨栈国际化同步问题：

既然你原本计划用fast_gettext这类gettext方案，最直接的方式就是复用现有的.po翻译文件，通过工具转换成Vue I18n能识别的JSON资源，同时让Rails端继续使用fast_gettext处理传统视图。

具体步骤：

• 用po2json工具（可以集成到Rails的asset pipeline或者Vue的webpack构建流程中），把项目里的.po文件批量转换成结构化的JSON，比如输出为locales/en.json、locales/fr.json这类文件。
• 在Vue项目中引入vue-i18n，加载这些转换后的JSON文件作为翻译资源。
• 关键要保证Rails和Vue使用完全一致的键名规则，比如都采用"dashboard.title": "控制台首页"这种命名空间式的键，这样两边就能无缝共享同一份翻译文案，不需要重复维护。

这个方案的优势是完全复用现有gettext翻译积累，不需要额外增加翻译维护成本，适合已经有大量PO文件的成熟项目。

如果不想手动处理文件转换，可以让Rails后端暴露一个接口，把当前语言的所有gettext翻译以JSON格式返回，Vue在初始化时请求这个接口加载翻译内容。

实现示例：

1. 在Rails中新增一个控制器动作：

class I18nController < ApplicationController
  skip_before_action :verify_authenticity_token, only: [:translations]

  def translations
    # 提取当前语言的gettext翻译并转为JSON
    translations = FastGettext.translations
    render json: translations
  end
end

记得在routes.rb中添加对应的路由：

get '/i18n/translations', to: 'i18n#translations'

2. 在Vue的入口文件（比如main.js）中，先请求接口再初始化Vue I18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

async function initApp() {
  // 从Rails渲染的HTML中获取当前语言（比如布局里设置的lang属性）
  const currentLocale = document.documentElement.lang
  const response = await fetch(`/i18n/translations?locale=${currentLocale}`)
  const translations = await response.json()

  const i18n = new VueI18n({
    locale: currentLocale,
    messages: {
      [currentLocale]: translations
    }
  })

  new Vue({
    i18n,
    render: h => h(App)
  }).$mount('#app')
}

initApp()

这个方案的好处是能实时同步Rails端的翻译更新，不需要重新构建Vue项目，适合翻译内容频繁变动的场景。

如果你的项目规模不大，还可以用更轻量的方式：在Rails的布局文件中，把当前语言的翻译资源直接注入到全局window对象中，Vue直接读取这个全局变量即可。

实现示例：

1. 在Rails的application.html.erb布局里添加：

<script>
  // 把gettext翻译转为JSON注入全局
  window.i18nTranslations = <%= FastGettext.translations.to_json.html_safe %>
  // 同步当前语言设置
  window.currentLocale = "<%= FastGettext.locale %>"
</script>

2. 在Vue中初始化Vue I18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: window.currentLocale,
  messages: {
    [window.currentLocale]: window.i18nTranslations
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

这个方案不需要额外的API请求，加载速度更快，适合中小型项目快速落地。

额外注意点 #

• 不管用哪种方案，都要确保语言切换逻辑两端同步：比如用户在Rails视图中切换语言时，要同时更新Vue的$i18n.locale；反之，Vue中切换语言也要通知Rails后端更新FastGettext.locale。
• 如果用到gettext的复数规则，要注意Vue I18n的复数处理逻辑和gettext是否兼容，必要时可以自定义Vue I18n的复数规则来匹配gettext的行为。

内容的提问来源于stack exchange，提问作者psychoslave