Как асинхронно загрузить локали i18n в Vue 3 + Vite

Введение

В моем предыдущем рассказе Как создать многоязычное приложение Vue 3 + Vite мы создали многоязычное приложение с помощью подключаемого модуля Vue I18n, где мы сохранили все сообщения локали во внешних файлах json. Затем файлы были предварительно скомпилированы и объединены в процессе сборки. Таким образом, все локали включены в основной пакет и доступны сразу после загрузки приложения. Однако вы можете захотеть включить в основной пакет только несколько локалей, а остальные обслуживать асинхронно по мере необходимости. Это может уменьшить размер пакета в проектах со многими локалями.

В этом руководстве

Мы расширяем приложение Vue 3 + Vite из прошлой истории, чтобы связать в основном чанке только несколько локалей, а остальные подгружаются асинхронно по мере необходимости.

Существует несколько способов реализации асинхронной загрузки локалей. В этом руководстве файлы сообщений локали, которые не включены в основной блок, предоставляются в виде статических файлов json. Приложение Vue 3 на стороне клиента может затем загрузить файл ресурсов локали, когда это необходимо, используя API выборки. После загрузки локали сообщения локали должны быть скомпилированы и добавлены в глобальный экземпляр I18n.

Этот подход требует размещения файлов ресурсов локали в двух разных каталогах.

Предпосылки

У вас есть базовое понимание того, как работать с Vue 3 + Vite, Composition API и синтаксисом <script setup>.
node.js установлен на вашем компьютере
Вы прочитали и поняли мою предыдущую историю, так как она служит основой

Базовое приложение

Клонируйте приложение Vue 3 + Vite с помощью подключаемого модуля Vue I18n из прошлой истории, открыв терминал в нужном рабочем каталоге и выполнив следующую команду:

git clone https://github.com/robinkloeckner/vue3_vite_i18n

В качестве альтернативы вы можете скачать исходный код с GitHub.

Затем перейдите в корневой каталог проекта, установите все модули и запустите сервер разработки:

cd vue_vite_i18n
npm install
npm run dev

Если вы сейчас перейдете к http://localhost:5173/, вы увидите, что приложение похоже на приложение, которое поставляется со стандартной установкой Vue 3 + Vite. Однако приложение дополнено подключаемым модулем Vue I18n, который предоставляет множество функций для локализации вашего приложения, а также подключаемым модулем unplugin-vue-i18n, который обеспечивает компилятор для преобразования сообщений локали из выделенных файлов json в функции JavaScript в процессе сборки. Далее к компоненту HelloWorld.vue добавляется компонент LocaleSelect.vue для изменения локали. Файлы ресурсов локали расположены в src/locales/, которые затем загружаются в файл main.js перед созданием экземпляра Vue I18n. Подробное описание исходного кода читайте в моей предыдущей истории.

Базовый проект имеет следующую структуру папок:

public/
  favicon.ico
src/
  assets/
    ...
  components/
    icons/
      ...
    HelloWorld.vue
    LocaleSeclect.vue
    TheWelcome.vue
    WelcomeItem.vue
  locales/
    de.json
    en.json
  App.vue
  main.js
.gitignore
index.html
package.json
package-lock.json
README.md
vite.config.js

Иллюстрация работающего приложения:

Добавить новую локаль

Затем мы добавляем новую локаль, которая позже должна быть загружена асинхронно. Поскольку мы хотим использовать его как статический файл, проще всего поместить его в каталог public/, потому что папка копируется в каталог dist/ во время сборки. Поэтому создайте новый файл es.json в public/ со следующим содержимым:

Конфигурация Vite

В файле конфигурации vite.config.js базового приложения VueI18nPlugin уже добавлено и содержит путь к файлам ресурсов локали, которые будут объединены в процессе сборки.

В дополнение к этому нам нужно установить опцию runtimeOnly в false, чтобы включить компилятор сообщений в бандл. Компилятор сообщений, в свою очередь, нужен для преобразования сообщений локали из файла JSON в функции JavaScript (см. документацию здесь и здесь).

Окончательный vite.config.js выглядит следующим образом:

Настройка i18n

Чтобы все было организовано, мы поместим все, что связано с подключаемым модулем Vue I18n, в отдельный файл. Поэтому создайте файл i18n.js в каталоге src/ со следующим содержимым:

Сначала мы импортируем сообщения локали из каталога src/locales/, используя подключаемый модуль unplugin-vue-i18n (строка 2). После этого мы определяем массив, содержащий все локали, которые мы хотим предложить, в строке 5. Массив будет использоваться позже для создания выпадающего меню для изменения локали. В строках с 8 по 14 мы создаем экземпляр Vue I18n. Поскольку мы хотим использовать Composition API с синтаксисом <script setup>, для переменной legacy должно быть установлено значение false. Мы также устанавливаем локаль по умолчанию на английский язык. Подробное объяснение опций смотрите в моей предыдущей истории.

Функция setLocale() будет вызываться, когда пользователь выбирает новую локаль, тогда как параметр locale будет содержать выбранную локаль. Все доступные в настоящее время локали перечислены в свойстве availableLocales экземпляра Vue I18n. Если выбранная локаль не включена в этот список, ее необходимо получить с сервера с помощью метода fetch(). Это делается в отдельной функции loadLocale(), которая возвращает обещание. Если запрос выполнен успешно, сообщения локали назначаются константе messages. В случае ошибки messages будет неопределенным. В этом случае мы возвращаемся из функции без изменения локали (строка 24). Если запрос выполнен успешно, новая локаль добавляется в глобальный экземпляр I18n в строке 28. В фоновом режиме локаль автоматически компилируется в JavaScript. В конце локаль меняется в строке 32.

Переключатель локали

Далее необходимо изменить элемент <select> из компонента LocaleSwitch.vue. Мы по-прежнему хотим синхронизировать значение элемента <select> с локалью, установленной в экземпляре Vue I18n. Однако, в отличие от текущей реализации, мы не хотим напрямую менять локаль. Вместо этого мы хотим использовать пользовательскую функцию setLocale() из файла i18n.js, потому что именно оттуда мы получаем локали, если они еще недоступны. Кроме того, опции элемента <select> должны создаваться по списку всех доступных локалей, а не по тем, что собраны в основном чанке.

Поэтому измените компонент LocaleSelect.vue следующим образом:

Элемент <select> заполняется опциями путем циклического просмотра списка всех доступных локалей, allLocales, как определено в файле i18n.js, при этом имя локали устанавливается как значение опции с помощью :value="locale".

В строке 8 мы привязываем значение элемента <select> к локали, установленной в глобальном экземпляре I18n с помощью :value="$i18n.locale". При изменении локали элемент <select> вызывает функцию setLocale(), устанавливая @change="setLocale($event.target.value)" с выбранной локалью, установленной в качестве параметра.

Окончательное приложение имеет следующую структуру папок:

public/
  locales/
    es.json
  favicon.ico
src/
  assets/
    ...
  components/
    icons/
      ...
    HelloWorld.vue
    LocaleSeclect.vue
    TheWelcome.vue
    WelcomeItem.vue
  locales/
    de.json
    en.json
  App.vue
  i18n.js
  main.js
.gitignore
index.html
package.json
package-lock.json
README.md
vite.config.js

Запуск приложения

Выполните производственную сборку и запустите локальный сервер предварительного просмотра с помощью:

npm run build
npm run preview

Затем откройте браузер и его инструменты разработчика. Перейдите на вкладку сети и перейдите к http://localhost:4173. Если вы измените язык с английского на немецкий (с en на de), вы не увидите никаких сетевых действий, поскольку обе локали включены в основной фрагмент, который Vite создает во время сборки. Однако, когда вы выберете испанский язык (es), вы увидите, что файл локали es.json загружается с локального сервера предварительного просмотра. Если вы измените язык обратно на английский или немецкий, а затем снова выберете испанский, языковой стандарт переключится на испанский без повторной загрузки с сервера.

Если испанская локаль не может быть выбрана правильно, проверьте консоль браузера на наличие ошибок и убедитесь, что runtimeOnly установлено в false в файле конфигурации vite.config.js.

Краткое содержание

В проектах Vue со многими локалями их асинхронная загрузка по мере необходимости может уменьшить начальный размер пакета приложения. Один из способов реализовать это — сохранить сообщение о локали в файлах JSON и получить их с сервера, когда они понадобятся. Затем файлы JSON необходимо скомпилировать на стороне клиента и добавить экземпляр Vue I18n.

Исходный код

GitHub: Базовое приложение без отложенной загрузки

GitHub: Последнее приложение с отложенной загрузкой

Спасибо за чтение :-)

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

👏 Хлопайте за историю и подписывайтесь на автора 👉
📰 Смотрите больше контента в публикации Level Up Coding
🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу