Локализация Vue.js с Vue-i18n и Localazy

Localazy — это универсальная платформа управления локализацией, которая поддерживает широкий спектр фреймворков и еще более широкий спектр форматов через интерфейс командной строки. Наиболее заметными функциями Localazy являются упреждающий процесс проверки, высокоточная память переводов, поддерживаемая общими переводами сообщества и не вызывающая беспокойства, а также кристально чистый пользовательский интерфейс, который не перегружен редко используемыми параметрами. И, как я вскоре покажу, он без проблем работает с vue-i18n.

Благодаря этому управление строками перевода даже в проектах с открытым исходным кодом, в которых каждый может внести свой вклад (с разным качеством), не составляет труда

Регистрация и создание приложения

Прежде всего, давайте настроим новую учетную запись на Localazy и создадим новое приложение . В этой статье мы будем использовать английский в качестве исходного языка, но обычно вы можете выбрать любой другой. Убедитесь, что опция Использовать переводы сообщества (ShareTM) включена. ShareTM — это высокоточная память переводов, о которой я упоминал. Благодаря этому в большинстве новых приложений целых 50 % строк автоматически доступны для перевода на более чем 80 языков.

Приступайте к созданию приложения. После этого выберите Vue.js на экране интеграции. Мы будем использовать мощный инструмент командной строки для управления загрузкой и выгрузкой фраз. Установка доступна для Linux, MacOS и Windows. Обратите внимание на клавиши чтения и записи на шаге 2. Они нам скоро понадобятся.

Настраиваем проект Vue

Создайте новый проект Vue с помощью vue create vue-i18n-example(если у вас не установлен Vue CLI, запустите npm install -g @vue/cli) и используйте предустановку Vue 2 . После того, как все будет установлено, добавьте vue-i18n.

npm install vue-i18n

Теперь пришло время добавить интеграцию с Localazy. Создайте localazy.jsonв корневой папке и вставьте следующую конфигурацию. Используйте клавиши записи и чтения из шага 2 страницы руководства по интеграции.

{
    "writeKey": "your-write-key",
    "readKey": "your-read-key",

    "upload": {  
      "type": "json",
      "files": "src/assets/locales/en.json"         
    },

    "download": {
      "files": "src/assets/locales/${lang}.json"
    }
}

Кроме того, создайте src/assets/localesпапку и en.jsonфайл внутри. Так как мы установили английский в качестве исходного языка, этот файл будет содержать исходные фразы для нашего приложения. Вы можете заполнить любую пару ключ-значение, которая вам нравится. Я добавлю это.

{
  "hello": "Hello, my friend",
  "stay_awhile_and_listen": "Stay awhile and listen"
}

На этом этапе приложение готово к локализации, управляемой Localazy. Прежде чем мы загрузим первую группу строк, давайте подготовим тестовый сценарий с vue-i18n, чтобы избавиться от него.

Сначала модифицируйте main.js.

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";

const messages = {
    en,
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'en',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

А потом App.vue

<template>
  <div id="app">
    <h1>{{$t('hello')}}</h1>
    <h2>{{$t('stay_awhile_and_listen')}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Когда вы запустите npm run serve, вы должны увидеть две английские фразы. Пока ничего особенного.

Загрузка и скачивание фраз

Давайте загрузим английский файл в Localazy. Из корневой папки выполните следующую команду

localazy upload -s

Аргумент -sозначает моделирование. Хорошей практикой является тестирование конфигурации без загрузки чего-либо, чтобы убедиться, что ничего непредвиденного не произойдет (например, некоторые пары «ключ-значение» не совпадают и переопределяют друг друга).

Вывод должен быть примерно таким, в зависимости от версии CLI

Localazy CLI, v1.1.9
Advanced file uploader/downloader for the Localazy translation platform.

Read more information at https://localazy.com/docs/cli

Uploading...
  - deprecate missing: false
  - import as new: false
  - app version: 0
  - groups: (default only)
  - folder: .

Processing files...

./src/assets/locales/en.json
  (file=file.json, lang=inherited, type=json)

Verifying...

Validating...

Done.

Все получилось хорошо и наш английский файл совпал. На этот раз давайте загрузим его по-настоящему.

localazy upload

Обновите страницу приложения, и вы должны увидеть английский язык в списке. Откройте вкладку Добавить языки , и там вы найдете пару языков с информацией о проценте автоматизированных переводов. Возможно, вы увидите 50% или 100%. Автоматическое сопоставление с ShareTM постоянно улучшается, и, скорее всего, благодаря этой статье вы бы автоматически перевели все фразы. Как это круто? 🙂

Так или иначе, найдите немецкий язык и добавьте его в свое приложение. Вы увидите кнопку обзора. Каждый раз, когда ShareTM предлагает перевод, он будет иметь статус кандидата. Это означает, что он будет готов к обзору, и любой рецензент может либо одобрить его, либо отклонить. Продолжайте и одобряйте предложенные фразы.

В случае, если ShareTM не перевел 100 % фраз, вернитесь к списку языков и обратите внимание, что кнопка просмотра теперь читается как перевести. Localazy распознает, что просматривать нечего, но есть что переводить, поэтому предлагает вам следующее наиболее вероятное действие в один клик.

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

Пришло время вернуться к проекту Vue.

localazy download

С помощью этой команды вы загрузите все новые принятые фразы и новые добавленные языки. В папке локалей мы видим новый файл de.json.

Последнее, что нужно сделать, это обновить main.jsи добавить файл ресурсов немецкой локали.

import Vue from 'vue'
import App from './App.vue'
import VueI18n from "vue-i18n";
import en from "../src/assets/locales/en.json";
import de from "../src/assets/locales/de.json";


const messages = {
    en,
    de
}

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'de',
    messages
})


Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

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

Заключительные слова

Надеюсь, вам понравилось это краткое введение в Localazy с vue-i18n.