Интернационализация Vue.js (i18n) с vue-i18n и Intlayer

www.youtube.com

Open embedded page in fullscreen

Содержание

Что такое Intlayer?

Intlayer, это инновационная, с открытым исходным кодом библиотека интернационализации, разработанная для устранения недостатков традиционных решений i18n. Она предлагает современный подход к управлению контентом в приложениях Vue.js и Nuxt.

Смотрите конкретное сравнение с vue-i18n в нашем блоге vue-i18n vs. Intlayer.

Почему стоит сочетать Intlayer с vue-i18n?

Хотя Intlayer предоставляет отличное самостоятельное решение i18n (см. наше руководство по интеграции с Vue.js), вы можете захотеть сочетать его с vue-i18n по нескольким причинам:

1. Существующая кодовая база: У вас уже есть реализованная система vue-i18n, и вы хотите постепенно перейти на улучшенный опыт разработки с Intlayer.
2. Требования наследия: Ваш проект требует совместимости с существующими плагинами или рабочими процессами vue-i18n.
3. Знакомство команды: Ваша команда привыкла к vue-i18n, но хочет улучшить управление контентом.
4. Использование возможностей Intlayer: Вы хотите использовать функции Intlayer, такие как декларация контента, автоматизация перевода, тестирование переводов и многое другое.

Для этого Intlayer может быть реализован как адаптер для vue-i18n, чтобы помочь автоматизировать ваши JSON-переводы в CLI или CI/CD пайплайнах, тестировать переводы и многое другое.

Это руководство показывает, как использовать превосходную систему декларации контента Intlayer, сохраняя при этом совместимость с vue-i18n.

Пошаговое руководство по настройке Intlayer с vue-i18n

1. 1

   Установка зависимостей

   Установите необходимые пакеты с помощью предпочитаемого менеджера пакетов:

   bash

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   npx intlayer init --interactive
   

   флаг --interactive не является обязательным. Используйте intlayer-cli init, если вы являетесь ИИ-агентом.

   Эта команда определит вашу среду и установит необходимые пакеты. Например:

   bash

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   npm install intlayer @intlayer/sync-json-plugin --save-dev
   

   Объяснение пакетов:

   • intlayer: Основная библиотека для декларации и управления контентом
   • @intlayer/sync-json-plugin: Плагин для синхронизации деклараций контента Intlayer с форматом JSON vue-i18n
2. 2

   Реализация плагина Intlayer для обёртки JSON

   Создайте файл конфигурации Intlayer для определения поддерживаемых локалей:

   Если вы также хотите экспортировать JSON-словарь для vue-i18n, добавьте плагин syncJSON:

   intlayer.config.ts

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "vue-i18n",
         source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
       }),
     ],
   };
   
   export default config;
   

   Плагин syncJSON автоматически обернет JSON. Он будет читать и записывать JSON-файлы без изменения архитектуры содержимого.

   Если вы хотите, чтобы JSON сосуществовал с файлами деклараций контента Intlayer (.content файлы), Intlayer будет работать следующим образом:

   plaintext

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   1. загрузит как JSON, так и файлы деклараций контента и преобразует их в словарь Intlayer.
   2. если возникнут конфликты между JSON и файлами деклараций контента, Intlayer выполнит слияние всех словарей. В зависимости от приоритета плагинов и файлов деклараций контента (все настраивается).

   Если изменения вносятся с помощью CLI для перевода JSON или через CMS, Intlayer обновит JSON-файл с новыми переводами.

   Чтобы узнать больше подробностей о плагине syncJSON, пожалуйста, обратитесь к документации плагина syncJSON.

Конфигурация Git

Исключите сгенерированные файлы из системы контроля версий:

# Игнорировать файлы, сгенерированные Intlayer
.intlayer

Эти файлы автоматически пересоздаются в процессе сборки и не требуют добавления в ваш репозиторий.

Расширение VS Code

Для улучшения опыта разработчика установите официальное расширение Intlayer для VS Code:

Установить из магазина расширений VS Code

Установить из магазина расширений VS Code