Lingo.dev + Vue.js 单文件组件

Lingo.dev CLI 支持 Vue I18n 单文件组件，让你可以将翻译内容保存在 .vue 文件中。

注意： 如果你的 Vue.js 应用使用 JSON 语言包文件，请为前端使用 .json 格式。

快速设置

在项目根目录下创建一个 i18n.json 配置文件：

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

此配置将英语设为源语言，目标为西班牙语、法语和德语，并处理 .vue 文件，目录为 src/components 和 src/views。

查找支持的语言

列出可用的源语言和目标语言：

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

一键翻译全部内容

运行以下命令，翻译所有 Vue 组件：

npx lingo.dev@latest run

CLI 会扫描组件中的 <i18n> 区块，翻译新增或变更的内容，并原地更新翻译。

与 Vue 组件的集成方式

Lingo.dev 直接兼容 Vue 的标准 i18n 结构：

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

翻译完成后，组件将包含所有目标语言：

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

高级配置

排除文件

排除特定组件不参与翻译：

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

混合翻译模式

结合组件内和文件内的翻译：

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

这种设置将组件专属的翻译保留在各自组件内，并将全局翻译存储在独立的 JSON 文件中。

为什么采用这种方式

将翻译与使用它们的组件绑定
无需将字符串提取到单独的文件
AI 能理解组件上下文，提升翻译质量
只翻译有变动的内容
兼容 Vue I18n 推荐的模式

Lingo.dev 提供 AI 驱动的翻译，同时保持 Vue 的组件化架构。