遅延ロード

すべてのローカリゼーションファイルを一度に読み込むのは、過剰であり且つ不要です。

バンドラを使用する場合、遅延ロードまたは非同期でローカリゼーションファイルを読み込むことは非常に簡単です。

以下の構造と似たプロジェクトディレクトリがあると仮定します：

├── 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フォルダには、About.vueなど任意の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
  }
  /**
   * 注意:
   * `fetch` APIなどのヘッダーに言語設定を指定する必要がある場合は、ここで設定してください。
   * 以下は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()
}

以下の3つの関数がエクスポートされています：

• setupI18n
• setI18nLanguage
• loadLocaleMessages

TIP

このコード例は、i18nインスタンスのglobalプロパティを使用してコンポーネントの外部で処理を行う方法も示しています。 i18nインスタンスについては、APIリファレンスをご覧ください。

setupI18n関数はcreateI18nと同じオプションを受け取り、それらのオプションでi18nのインスタンスを作成し、setI18nLanguage関数を実行して、i18nのインスタンスを返します。

setI18nLanguage関数は、パラメータi18nのロケールをパラメータlocaleの値に設定することで言語を設定します。また、この関数はHTMLドキュメントのlang属性をパラメータlocaleの値に設定するユーティリティ機能を持っています。コメントで指摘されているように、HTTPクライアントのように言語を設定することもできます。

loadLocaleMessages関数は、言語を変更するために実際に使用する関数です。新しいファイルを読み込むにはimport関数を使用し、これはwebpackによって効率的に提供されており、動的にファイルを読み込むことを可能にし、Promiseを使用するため、読み込みが完了するまで簡単に待機できます。

import関数について詳しくは、webpackのドキュメントをご覧ください。

loadLocaleMessages関数の使用は簡単です。よくある使い方はvue-routerのbeforeEachフック内です。

router.jsのvue-routerのbeforeEachフック部分のコードは次の通りです：

  // ナビゲーションガード
  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()
  })