Vue I18n 日本語ドキュメント

日本語

English
简体中文
Español
Français
Русский

日本語

English
简体中文
Español
Français
Русский

Appearance

最適化 ​

パフォーマンス ​

"Different Distribution files" セクションで説明したように、Vue I18n はバンドラ用に以下の2つのESモジュールを提供しています。

  • メッセージコンパイラ + ランタイム: vue-i18n.esm-bundler.js
  • ランタイムのみ: vue-i18n.runtime.esm-bundler.js

バンドラの場合、デフォルトで @intlify/unplugin-vue-i18n とともに vue-i18n.esm-bundler.js をバンドルするように構成されています。さらにバンドルサイズを小さくしたい場合は、ランタイムのみの vue-i18n.runtime.esm-bundler.js を使用するようにバンドラを構成できます。

ESモジュール vue-i18n.runtime.esm-bundler.js の使用では、すべてのロケールメッセージは事前にメッセージ関数またはASTリソースにコンパイルする必要があります。これは、vue-i18nがメッセージ関数のみを実行するため、コンパイルが不要になるのでパフォーマンスが向上することを意味します。

注意

v9.3より前では、ロケールメッセージはメッセージ関数にコンパイルされますが、v9.3以降は @intlify/bundle-tools でASTにコンパイルされます。

注意

v9.3より前では、すべてのロケールメッセージは @intlify/unplugin-vue-i18n でコンパイルされるため、メッセージコンパイラはバンドルされず、バンドルサイズを削減できます。

v9.3以降は、メッセージコンパイラもバンドルされるため、バンドルサイズを削減することはできません。これはトレードオフです。 理由については、JITコンパイルについての詳細を参照してください。

注意

v9.3より前のバージョンでCSPが有効になっている場合、vue-i18n.esm-bundler.js は eval 文によりコンパイラと互換性がなくなります。これらの文は default-src 'self' ヘッダーに違反します。代わりに vue-i18n.runtime.esm-bundler.js を使用する必要があります。

通知

v9.3以降では、vue-i18nメッセージコンパイラのJITコンパイルによりCSPの問題を回避できます。詳細については、JITコンパイルについての詳細を参照してください。

構成方法 ​

これらのモジュールをモジュールパスを使って、viteやwebpackなどのバンドラーのモジュール解決エイリアス機能（例: resolve.alias）で構成できますが、これは時間と労力がかかります。 Intlifyプロジェクトは、簡潔なためにいくつかのバンドラー用のプラグイン/ローダーを提供しています。

unplugin-vue-i18n ​

unplugin は、vite、webpack、rollup、esbuildなどバンドルツール用の一元化プラグインシステムです。

Intlifyプロジェクトは、viteとwebpack用に unplugin-vue-i18n を提供しています。

本番ビルドを行う場合、Vue I18nは自動的にランタイムのみのモジュールをバンドルします。

プラグインのインストール ​

sh
npm install @intlify/unplugin-vue-i18n -D
sh
yarn add @intlify/unplugin-vue-i18n -D
sh
pnpm add -D @intlify/unplugin-vue-i18n

vite用のプラグイン構成 ​

js
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

webpack用のプラグイン構成 ​

js
// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

その他の構成 ​

オプションと機能の詳細については、ページを参照してください

Quasar CLI ​

何もする必要はありません。Quasar CLI が最適化を自動的に行います。

機能ビルドフラグ ​

木刈りでバンドルサイズを削減 ​

esm-bundler ビルドは、コンパイル時に上書きできるグローバル機能フラグを公開しています：

  • __VUE_I18N_FULL_INSTALL__ (有効/無効、vue-i18n API、コンポーネント、ディレクティブのすべての完全なサポートを有効にする: true)
  • __VUE_I18N_LEGACY_API__ (vue-i18nのレガシースタイルAPIのサポートを有効/無効にする、デフォルト: true)

これらのフラグを設定せずにビルドしても動作しますが、最終的なバンドルで適切な木刈りを得るために強く推奨します。

バンドラー向けの構成方法については、こちらを参照してください。

JITコンパイル ​

サポートバージョン

🆕 9.3+

v9.3より前では、vue-i18nメッセージコンパイラはAOT（先行時）のようにロケールメッセージを事前にコンパイルしていました。

しかし、以下の問題がありました：

  • CSP問題：サービス/ウェブワーカー、CDNのエッジサイドランタイムなどで作業するのが難しい
  • バックエンド統合：データベースのようなバックエンドからAPI経由でメッセージを取得し、動的にローカライズするのが難しい

これらの問題を解決するために、JIT（即時）スタイルのコンパイルをサポートするメッセージコンパイラが導入されました。

アプリケーションで $t または t 関数を使用してローカライズが行われるたびに、メッセージリソースがメッセージコンパイラでコンパイルされます。

esm-bundler ビルドとviteなどのバンドラーで以下の機能フラグを構成する必要があります：

  • __INTLIFY_JIT_COMPILATION__ (JITスタイル用メッセージコンパイラを有効/無効にする、デフォルト: false)
  • __INTLIFY_DROP_MESSAGE_COMPILER__ (バンドル時にメッセージコンパイラを木刈りするか否かを有効/無効にする、このフラグは __INTLIFY_JIT_COMPILATION__ が有効な場合にのみ動作する。デフォルト: false)

通知

この機能は、v9.3より前のバージョンとの互換性のため、デフォルトでオプトアウトされています。

通知

v10以降では、JITコンパイルがデフォルトで有効になるため、バンドラーで __INTLIFY_JIT_COMPILATION__ フラグを設定する必要はありません。

バンドラー向けの構成方法については、こちらを参照してください。

バンドラー用の機能フラグの構成 ​

  • webpack: DefinePlugin を使用
  • Rollup: @rollup/plugin-replace を使用
  • Vite: デフォルトで構成されていますが、define オプションで上書きできます
  • Quasar CLI: デフォルトで構成されていますが、quasar.conf.js > build > rawDefine で上書きできます

注意

置換値は論理値リテラルである必要があり、文字列であってはならず、そうしないとバンドラー/ミニファイアが条件を適切に評価できなくなります。

拡張機能での事前翻訳 ​

vue-i18n-extensions パッケージを使用して事前翻訳（サーバーサイドレンダリング）を使用できます。

使用方法については、こちらを参照してください。

SSR（サーバーサイドレンダリング） ​

SSR用のプラグイン構成 ​

SSRアプリケーションの場合、@intlify/unplugin-vue-i18n の ssr オプションを構成する必要があります：

ts
// vite.config.ts
import { defineConfig } from 'vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    VueI18nPlugin({
      ssr: true, // SSRサポートを有効にする
    }),
  ],
})

Copyright © 2026-present allyouneed.tools