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

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

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

Вместо того, чтобы использовать библиотеки, я решил принять вызов и реализовать это самостоятельно, потому что я подумал «Нет никакого способа, чтобы это могло быть сложно с совершенством и простотой Vue» .

Этот блог как раз об этом: как реализовать локализацию в вашем приложении Vue. Может быть, кто-то наткнется на это, если погуглит эту тему, как я.

Итак, давайте посмотрим, что мы хотим построить.

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

Общая идея реализации проста:

  • сохранить выбранный язык в нашем магазине Vuex
  • создать настраиваемый фильтр Vue (| translate), который возьмет наши строки и вернет их, переведенные на желаемый язык.
  • создать службу, которая будет использоваться фильтром для доступа к нашим файлам локализации и решить, какой перевод вернуть, в зависимости от языка, выбранного в настоящее время в магазине.

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

1. Создать проект

Очевидно, что первое, что нам нужно, это проект Vue. Для этой демонстрации я использовал этот шаблон, который представляет собой простой шаблон, включающий webpack и vue-loader, подходящий для прототипирования. Просто следуйте инструкциям по его использованию, и все готово. Я удалил большую часть кода в App.vue, который идет с этим шаблоном, я оставил только логотип Vue и добавил к нему заголовок <h1>Translate with Vue</h1>.

Если у вас есть собственный проект, в который вы хотите добавить локализацию, смело используйте свой существующий проект.

2. Создайте компонент выбора языка

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

Первое, что мы сделаем, это добавим папку «component» в нашу папку «src» и создадим компонент Single File Vue под названием LanguageSelector.vue.

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

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

В папке локализации создайте файл languages.js и создайте массив языков, которые вы хотите поддерживать.

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

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

Наш компонент LanguageSelector будет выглядеть следующим образом:

Прежде чем добавлять Vuex в уравнение, давайте используем этот компонент в нашем App.vue.

Наше приложение пока выглядит следующим образом:

3. Настроить магазин Vuex

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

Установите Vuex, запустив npm install vuex —- save.

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

Для наглядности структуры проекта давайте создадим наш магазин в отдельной папке. Добавьте папку с именем «store» в папку «src» и создайте файл js с именем «index.js». В нашем штате должен храниться текущий выбранный язык, которому я присвоил идентификатор первого языка из нашего списка доступных языков. Нам понадобится одна мутация, которая установит значение текущего языка на основе ввода пользователя из селектора языка.

Наконец, нам нужен один геттер, который будет использоваться нашим фильтром для извлечения значения выбранного языка, чтобы использовать его для перевода. Итак, файл index.js в нашем магазине будет выглядеть следующим образом:

Не забудьте добавить магазин в свое приложение в файле main.js.

import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
 el: '#app',
 store,
 render: h => h(App)
})

Теперь необходимо немного изменить наш компонент выбора языка, чтобы он мог работать с магазином. Вместо того, чтобы использовать переменную в самом компоненте для v-модели нашего переключателя, мы разделим наше свойство «selectedLanguage» на getter и установщик, который использует мутацию и получатель хранилища для установки и получения значения текущего выбранного языка. Это дает следующий окончательный код в нашем компоненте выбора языка:

4. Создать службу перевода

Теперь мы готовы приступить к собственно процессу перевода. Перевод будет выполняться в нашей службе перевода, в которой будет метод translate. Этот метод всегда будет получать один параметр, который представляет ключ строки, которую нам нужно перевести. Службе перевода необходимо знать о текущем выбранном языке в нашем магазине, чтобы найти правильный набор пар ключ-значение, где он будет искать переданный ключ и возвращать правильный перевод. Итак, давайте сначала создадим наш словарь и фактические файлы локализации, чтобы нашему сервису было с чем работать.

В папку локализации добавьте файл локализации для каждого поддерживаемого языка. В моем случае это будут файлы «lang-bs.js» (для боснийских переводов) и «lang-en.js» (для переводов на английский язык). Оба эти файла будут просто содержать пары строк "ключ-значение" и их перевод на язык, которому соответствует файл.

В демонстрационных целях я добавил к обоим файлам три переведенные строки, которые позже буду использовать для демонстрации работы решения, но здесь вы добавляете все свои будущие переводы. Вот мои файлы локализации:

И последнее, что нам нужно сделать, чтобы наша служба могла прочитать правильный перевод, - это объединить эти два объекта локализации в один словарь. Добавьте файл index.js в папку локализации и импортируйте в него файлы локализации. Объедините их в один объект, где ключ - это идентификатор языка, на который отвечает локализация, а значение - это фактический объект локализации. Это выглядит следующим образом:

Теперь напишем реальную услугу. Создайте папку «services» в разделе «src» и создайте в ней файл «translate.service.js». Здесь мы реализуем наш сервис перевода. Во-первых, нам нужно импортировать наш магазин, чтобы служба знала о выбранном языке и нашем ранее созданном словаре.

Метод translate извлекает текущий язык из нашего магазина и использует полученное значение для доступа к файлу локализации, идентифицированного выбранным значением языка в нашем словаре, а затем возвращает правильный ключ в этом файле локализации.

Теперь наша служба готова к использованию с помощью фильтра перевода.

5. Создать фильтр перевода

Создать фильтр перевода теперь довольно просто и легко, так как он использует нашу службу перевода.

Сначала давайте добавим папку «filter» в «src» и создадим файл translate.filter.js. Создайте в нем фильтр Vue, который просто передает полученный ключ в нашу службу перевода, которая, в свою очередь, переводит ключ на правильные языки. Фильтр просто отображает это в нашем пользовательском интерфейсе.

Импортируйте фильтр в файл main.js, чтобы сделать его доступным во всем мире, добавив import ‘./filters/translate.filter’;

Теперь мы настроены использовать наш фильтр перевода и сделать наше приложение действительно международным.

6. Используйте фильтр перевода

Я добавил три примера использования нашего фильтра в свою папку App.vue.

<h2>{{ 'lbl-welcome' | translate}}</h2>
<button>{{'lbl-confirm' | translate}}</button>
<input type="button" :value="'lbl-cancel' | translate">

Как видите, реализация теперь просто используется как фильтр Vue, чтобы указать, какие строки необходимо перевести. Их можно использовать непосредственно в ваших HTML-тегах с помощью интерполяции текста или в привязках атрибутов элементов, как показано выше.

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

Как видите, решение очень простое и понятное благодаря фильтрам Vuex и Vue.

Его легко расширить, добавив больше языков и неограниченное количество строк в файлы локализации.

Полный код этого примера можно найти здесь.

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

Если у вас есть какие-либо вопросы или предложения, не стесняйтесь обращаться ко мне по адресу [email protected]