# Интернационализация I18n

Vuesion содержит модуль i18n для добавления перевода приложения на различные языки.

# Перевод по-умолчанию и поддержка других языков

Настройки основного языка приложения указаны в файле: ./vuesion/config.json.

Так же можно добавить дополнительные переводы. Скрипт extract-i18n-messages добавит переводы сообщений на выбранный язык.

Пример конфигурации:

  "i18n": {
    "defaultLocale": "en",
    "locales": [
        {
          "code": "en",
          "file": "en.json"
        },
        {
          "code": "ru",
          "file": "ru.json"
        }
    ]
    }

# Установка и извлечение сообщений

Откройте любой файл, например ./src/pages/index.vue:

<template>
  <div>
      <landing-page-header />
      ...
  </div>
</template>

Установите перевод по-умолчанию (en):

<template>
  <div>
      {{ $t('home.test' /* this is a test!!! */) }}
      <landing-page-header />
      ...
  </div>
</template>

Далее запустите npm run extract-i18n-messages и откройте http://localhost:3000/ (opens new window).

В верхнем левом углу будет сообщение this is a test!!!

В файле ./i18n/en.json новая строка:

{
...
  "home.test": "this is a test!!!"
}

Такая же строка появится в файле ./i18n/ru.json

Переведем ее на русский:

{
...
  "home.test": "Это проверка!!!"
}

Запустим npm run extract-i18n-messages.

Перевод не будет перезаписан, т.к. это не язык по-умолчанию.

Если изменить текст в компоненте

<template>
  <div>
      {{ $t('home.test' /* this is not a test!!! */) }}
      <landing-page-header />
      ...
  </div>
</template>

То после запуска npm run extract-i18n-messages текст для языка по-умолчанию будет перезаписан ./i18n/en.json:

{
...
  "home.test": "this is not a test!!!"
}

Но перевод останется прежним ./i18n/ru.json:

{
...
  "home.test": "Это проверка!!!"
}

# Ограничения

Для добавления HTML в шаблон сообщения следует использовать [] вместо <>:

<template>
  <div>
    <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
    ...
  </div>
</template>