Обработка интернационализации Vue vue-i18n и автоматическое переключение проектов между китайским и английским языками

внешний интерфейс JavaScript Element Vue.js

0. Перейти непосредственно к ссылке предварительного просмотра

Обработка интернационализации Vue vue-i18n и автоматическое переключение проектов между китайским и английским языками

1. Строительство окружающей среды

Команда для входа в каталог проекта и выполнения следующей команды для установки плагина интернационализации vue vue-i18n

npm install vue-i18n --save

2. Проект добавляет интернационализированные файлы перевода

Добавьте папку lang в src проекта, чтобы добавить файл перевода на китайский язык (zh_CN.js) и файл перевода на английский язык (EN.js), которые соответственно хранят информацию, которую необходимо перевести в проекте.

lang для получения адреса

3. Введение проекта

Внесите плагин vue-i18n в main.js проекта, введите соответствующий файл перевода (zh_CN.js/EN.js) и объедините его с интернационализацией Element-UI. Введите изображение ниже

vue-i18n

4. Использование проекта

Китайский сценарий Element-UI вводится в китайский файл перевода zh_CN, английский сценарий Element-UI вводится в английский файл перевода EN, а переводимое содержимое добавляется в файл следующим образом:

  • Zh_CN.js:
  • EN.js: Затем переведите, где вы хотите перевести.
Если это element-ui, добавьте двоеточие перед переводом

Например: label="username" заменяется на :label="$t('order.userName')"

Если он отображается в формате html, вместо этого используйте следующую запись:

Напишите его напрямую как {{$t('order.userName')}}, он попадет прямо в скрипт перевода для автоматического сопоставления.

Файл cookie, записи которого существуют после выбора языка.

这里写图片描述

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

这里写图片描述

На данный момент интеграция завершенаАдрес источника

Группа Vue Learning Boss 493671066, много красавиц. Старый водитель быстро сел в машину, объяснять было поздно.

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

Контроль разрешений фоновой системы на основе Vue2.0

vue2.0 на основе скинов elementui [пользовательская тема]

Сводная информация о интерфейсной документации

Добавление, удаление, изменение, вложение, редактирование, добавление компонентов модели (всплывающее окно) VUE2.0 совместно

Спасибо искренне

打赏