Ленивая загрузка

Загрузка всех ваших локализационных файлов одновременно является излишней и ненужной.

Ленивая или асинхронная загрузка локализационных файлов очень проста при использовании сборщика.

Предположим, у нас есть каталог проекта, подобный приведенному ниже:

├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   ├── i18n.js
│   ├── index.css
│   ├── locales
│   │   ├── en.json
│   │   └── ja.json
│   ├── main.js
│   ├── pages
│   │   ├── About.vue
│   │   └── Home.vue
│   └── router.js

Папка pages содержит наши произвольные файлы компонентов Vue, такие как About.vue, инициализацию маршрутизатора, инициализацию i18n и другие. Папка locales содержит все наши локализационные файлы, а в i18n.js определены функции для i18n-процессов следующим образом:

import { nextTick } from 'vue'
import { createI18n } from 'vue-i18n'

export const SUPPORT_LOCALES = ['en', 'ja']

export function setupI18n(options = { locale: 'en' }) {
  const i18n = createI18n(options)
  setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale
  } else {
    i18n.global.locale.value = locale
  }
  /**
   * ПРИМЕЧАНИЕ:
   * Если вам нужно указать настройку языка для заголовков, например для API `fetch`, установите здесь.
   * Ниже приведен пример для axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // загрузка локализационных сообщений с помощью динамического импорта
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  )

  // установка локали и локализационных сообщений
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}

Экспортируются следующие три функции:

• setupI18n
• setI18nLanguage
• loadLocaleMessages

TIP

Этот пример кода также показывает, как обрабатывать это вне компонента, используя global свойство экземпляра i18n. О экземпляре i18n см. Справочник по API

Функция setupI18n принимает те же параметры, что и createI18n, создает экземпляр i18n с этими параметрами, выполняет функцию setI18nLanguage и возвращает экземпляр i18n.

Функция setI18nLanguage устанавливает язык, задавая локаль параметра i18n значением параметра locale. Кроме того, эта функция имеет возможность установки атрибута lang HTML-документа в значение параметра locale. Как отмечено в комментариях, как и HTTP-клиент, вы также можете установить язык.

Функция loadLocaleMessages — это та, которую мы на самом деле будем использовать для изменения языков. Загрузка новых файлов осуществляется через функцию import, которая щедро предоставляется webpack и позволяет нам загружать файлы динамически, а поскольку она использует промисы, мы можем легко дождаться завершения загрузки.

Вы можете узнать больше о функции import в документации webpack.

Использование функции loadLocaleMessages простое. Распространенный случай использования — внутри хука beforeEach vue-router.

Вот код для части хука beforeEach vue-router в router.js:

  // защитники навигации
  router.beforeEach(async (to, from, next) => {
    const paramsLocale = to.params.locale

    // использовать локаль, если paramsLocale не в SUPPORT_LOCALES
    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
      return next(`/${locale}`)
    }

    // загрузить локализационные сообщения
    if (!i18n.global.availableLocales.includes(paramsLocale)) {
      await loadLocaleMessages(i18n, paramsLocale)
    }

    // установить язык i18n
    setI18nLanguage(i18n, paramsLocale)

    return next()
  })