Lingo.dev + .json (Vue.js)

Lingo.dev CLI 翻译 Vue.js 的 i18n JSON 文件,同时保留消息格式、插值语法和 Vue 特定的约定。CLI 与 vue-i18n 库无缝协作,保持所有 Vue 消息格式,保留诸如 {name} 的占位符,正确处理使用 @: 语法的消息链接,并保持组件插值占位符的完整性。

快速设置

为 Vue.js i18n 语言文件配置:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

提醒[locale] 是一个占位符,在配置中应保持原样,因为它会在 CLI 运行期间被实际的语言代码替换。

翻译 Vue i18n 文件

npx lingo.dev@latest i18n

保留 Vue.js 消息格式、插值占位符和 vue-i18n 特定语法。

Vue i18n 功能

消息插值

{
  "message": {
    "hello": "Hello {name}!",
    "welcome": "Welcome {name}, you have {count} messages"
  }
}

复数规则

{
  "car": "car | cars",
  "apple": "no apples | one apple | {count} apples"
}

消息链接

{
  "common": {
    "name": "Application Name"
  },
  "welcome": "Welcome to @:common.name"
}

Vue 的 @: 消息链接语法被保留。

高级 Vue 功能

HTML 消息支持

{
  "message": {
    "title": "Welcome to <strong>our platform</strong>",
    "link": "Visit our <a href='/help'>help center</a>"
  }
}

组件插值

{
  "message": {
    "terms": "I agree to {0}terms of service{/0} and {1}privacy policy{/1}"
  }
}

组件插值的占位符语法保持不变。

日期时间和数字格式化

{
  "datetime": {
    "short": "{value}",
    "long": "{value}"
  },
  "number": {
    "currency": "{value}"
  }
}

高级配置

多语言目录

"vue-json": {
  "include": [
    "src/locales/[locale].json",
    "src/i18n/[locale]/*.json"
  ]
}

锁定 Vue 特定键

"vue-json": {
  "include": ["src/locales/[locale].json"],
  "lockedKeys": ["$vuetify", "dateTimeFormats", "numberFormats"]
}