Vue i18n-блоки - Lingo.dev CLI

Что такое Vue i18n-блоки?

Vue i18n-блоки — это специальные секции <i18n> в однокомпонентных файлах Vue (SFC), которые содержат переводы в формате JSON. Они позволяют хранить переводы прямо рядом с кодом компонента.

Например:

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

Что такое Lingo.dev CLI?

Lingo.dev CLI — это бесплатный open-source CLI для перевода приложений и контента с помощью AI. Он создан, чтобы заменить традиционные системы управления переводами и легко интегрируется в существующие пайплайны.

Подробнее см. в разделе Обзор.

О данном гайде

В этом гайде рассказывается, как переводить Vue i18n-блоки с помощью Lingo.dev CLI.

Вы узнаете, как:

Создать проект с нуля
Настроить пайплайн для перевода
Генерировать переводы с помощью AI

Необходимые условия

Для работы с Lingo.dev CLI убедитесь, что установлен Node.js v18+ :

❯ node -v
v22.17.0

Шаг 1. Настройте проект

В директории вашего проекта создайте файл i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Этот файл определяет поведение пайплайна перевода: какие языки использовать и где на файловой системе находится локализуемый контент.

Подробнее о доступных свойствах см. в разделе i18n.json.

Шаг 2. Настройте исходную локаль

Исходная локаль — это оригинальный язык и регион, на которых был написан ваш контент. Чтобы настроить исходную локаль, укажите свойство locale.source в файле i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Исходная локаль должна быть указана в формате языкового тега BCP 47.

Полный список кодов локалей, поддерживаемых Lingo.dev CLI, смотрите в разделе Поддерживаемые коды локалей.

Шаг 3. Настройка целевых локалей

Целевые локали — это языки и регионы, на которые вы хотите перевести свой контент. Чтобы настроить целевые локали, укажите свойство locale.targets в файле i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Шаг 4. Создайте исходный контент

Если вы ещё не сделали этого, создайте файл компонента Vue с блоком <i18n>, содержащим контент для перевода.

Примечание: В процессе перевода исходные файлы контента будут перезаписаны, чтобы включить переведённый контент (в дополнение к исходному).

Шаг 5. Создайте bucket

В файле i18n.json добавьте объект "vue-json" в объект buckets:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

В объекте "vue-json" определите массив из одного или нескольких паттернов include:
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}
```
Эти паттерны определяют, какие файлы переводить, и могут:
- указывать на конкретные пути к файлам (например, "some/dir/file.vue")
- использовать звёздочки как подстановочные знаки (например, "some/dir/*.vue")
Рекурсивные glob-паттерны (например, **/*.vue) не поддерживаются.

Шаг 6. Настройте LLM

Lingo.dev CLI использует большие языковые модели (LLM) для перевода контента с помощью ИИ. Чтобы использовать одну из этих моделей, вам нужен API-ключ от поддерживаемого провайдера.

Чтобы быстро начать работу, рекомендуем использовать Lingo.dev Engine — нашу собственную облачную платформу, которая предоставляет 10 000 токенов бесплатного использования в месяц:

Зарегистрируйтесь в Lingo.dev.
Выполните следующую команду:
```
npx lingo.dev@latest login
```
Откроется ваш браузер по умолчанию и появится запрос на аутентификацию.
Следуйте подсказкам.

Шаг 7. Сгенерируйте переводы

В каталоге, где находится файл i18n.json, выполните следующую команду:

npx lingo.dev@latest run

Эта команда:

Читает файл i18n.json.
Находит файлы, которые нужно перевести.
Извлекает переводимый контент из файлов.
Использует настроенную LLM для перевода извлечённого контента.
Записывает переведённый контент обратно в файловую систему.

При первом создании переводов создаётся файл i18n.lock. Этот файл отслеживает, какой контент уже переведён, чтобы избежать лишних повторных переводов при следующих запусках.

Пример

example.vue (до перевода)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (после перевода)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051