В эпоху глобализации, в которой мы живем, необходимость создавать приложения для людей в разных частях мира становится все более и более распространенной. Эта необходимость связана с такими проблемами, как поддержка нескольких языков и их интеграция в ваше приложение, но, к счастью для нас, именно здесь вступает в игру интернационализация.

Что такое интернационализация и локализация?

Давайте начнем с самого начала, с некоторых концепций, которые нам нужно понять. Первый — Интернационализация. это слово относится к процессу планирования и реализации приложения для удовлетворения потребностей различных регионов по всему миру. Интернационализация также известна как i18n, что означает «I — восемнадцать букв — N».

Затем у нас есть Локализация (L10n),котораяэто процесс создания версий вашего приложения для целевого рынка или региона, включая перевод интерфейса, форматирование данных для определенных локалей и многое другое.

Преимущества интернационализации

Без процесса интернационализации приложение может стать не только трудным для разработки и трудоемким, но и практически невозможным для поддержки в больших масштабах. Давайте представим, что нам нужно создать приложение для людей в Испании и Франции, без интернационализации мы могли бы получить два разных приложения, по одному для каждого рынка, может быть, это не имеет большого значения, если есть только два рынка, но что, если нам нужно масштабировать до девяти или десяти рынков? Это будет ад обслуживания.

Подводя итог, вот преимущества реализации интернационализации в вашем приложении:

  • У вас будет единый источник достоверной информации, независимо от региона вашего приложения.
  • Его будет легко масштабировать на другие рынки.
  • Приложение будет легче поддерживать
  • Это сокращает время, стоимость и усилия, необходимые для реализации локализации.

Установка Vue i18n

Vue i18n — это плагин интернационализации Vue.js. Это очень полный плагин, который позволяет добавлять в приложение больше, чем просто переводы. Процесс установки очень прост, и у вас будет два разных способа сделать это:

Прямая загрузка: Эта ссылка всегда указывает на последнюю версию npm.

  • Глобальный импорт

  • Импорт модулей ES

Менеджеры пакетов:

При использовании с модульной системой вы должны явно установить vue-i18n через app.use():

Итак, как я уже сказал, установка очень проста, теперь самое интересное, давайте посмотрим, как мы можем его использовать и какие функции предоставляет этот плагин.

Использование Vue i18n

Здесь у нас есть простой пример того, как использовать плагин интернационализации в нашем приложении.

HTML

JavaScript

Результат будет

Это интересно. Но что еще мы можем сделать с плагином Vue i18n? Давайте посмотрим на некоторые другие функции, которые он приносит

Особенности Vue i18n

Простой текстовый перевод. Это в значительной степени то, что мы только что делали раньше. Чтобы использовать перевод, используйте функцию $t() с идентификатором перевода в качестве параметра.

Текст с параметрами. Вы также можете добавить параметры к своим текстам перевода, например, к файлу переводов, который у вас есть.

и в HTML передать имя в качестве аргумента

Перевод значений атрибутов: таким образом вы можете передавать переведенные значения атрибутов в подкомпоненты.

Множественное число. Чтобы локализовать сообщение, вам может потребоваться поддержка множественного числа для некоторых языков и изменение перевода в зависимости от количества элементов. это возможно с Vue I18n

Используйте функцию $tc(id,count,parameters), чтобы установить перевод со следующими параметрами:

  • id идентификатор перевода
  • count количество элементов для множественного числа
  • parameters параметров для добавления в текст (необязательно)

Так, например, в файле переводов мы можем иметь

затем в HTML мы указываем на наш идентификатор перевода и передаем число два, чтобы Vue знал, что это будет множественное число, поэтому выводит «цветы».

Можно еще конкретнее, например

vue-i18n автоматически заменяет {count} и {n} в переводе числом, переданным в функцию $tc():

Наконец, вы также можете передать объект параметра с именованными элементами в качестве третьего параметра.

и в HTML

Формат даты и времени

Вы можете локализовать дату и время с вашими форматами определения

После этого при использовании сообщений локали необходимо указать параметр datetimeFormats для createI18n:

Чтобы локализовать значение DateTime с помощью Vue i18n, используйте файл $d. В HTML

Результат будет

Форматирование чисел. Вы можете локализовать число с помощью своих форматов определения.

После этого при использовании сообщений локали необходимо указать параметр numberFormats для createI18n:

Ниже приведен пример использования $n в шаблоне:

В результате ниже:

Заключение

Даже если вы не планируете с самого начала поддерживать разные локали для своего приложения, рекомендуется планировать приложение с учетом интернационализации и добавления поддерживающей ее стратегии i18n.

Как вы видели ранее, реализация довольно проста и сэкономит массу времени и усилий, когда придет время локализовать приложение для разных рынков.

Дополнительные материалы на plainenglish.io