Vue を使用して多言語化と国際化を実現するにはどうすればよいですか?

グローバリゼーションの発展に伴い、多言語化と国際化はますます Web サイトやアプリケーションに必要な機能の 1 つになってきています。人気のあるフロントエンド フレームワークとして、Vue にはこの点に関する柔軟なソリューションもあります。この記事では、Vue を使用して多言語化と国際化を実現する方法を紹介します。

1. Vue-i18n をインストールする

Vue-i18n は、多言語化と国際化の実現に役立つ Vue.js の国際的なプラグインです。まず、プロジェクトに Vue-i18n をインストールする必要があります。

npm install vue-i18n --save

2. 言語ファイルの作成

プロジェクト内に言語ファイルを保存する i18n フォルダーを作成します。

Vue-i18n を設定するために、i18n フォルダーにindex.js という名前のファイルを作成します。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

上記のコードでは、ロケールは現在使用されている言語を示し、デフォルトでは英語が使用されます。メッセージは使用される言語ファイルを表し、それぞれ en.json (英語) と zh.json (中国語) が導入されます。

これで、i18n フォルダーに en.json および zh.json ファイルを作成し、言語コンテンツを書き込むことができます。

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3. Vue-i18n の使用

コンポーネントで Vue-i18n を使用するのは非常に簡単です。 $tc (翻訳) または $t (書式設定) をテンプレートに追加するだけです。

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

上記のコードでは、$t と $tc の両方を翻訳に使用できますが、違いは、$t は書式設定できることと、$tc はパラメータに応じて複数形にできることです。また、計算された属性での $t メソッドの使用と、コンポーネントの作成されたライフサイクルでの言語の変更も示します。

4. Vue CLI プラグインを使用する

Vue CLI は、多言語と国際化を迅速に統合できる公式プラグイン vue-cli-plugin-i18n を提供します。

まず、プラグインをインストールする必要があります。

vue add i18n

インストールが成功すると、言語ファイルを保存するためのロケール フォルダーがプロジェクト内に生成されます。

src/i18n.js ファイルを変更します。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

上記のコードでは、loadLocaleMessages 関数を使用して言語ファイルをロケール フォルダーに自動的にロードし、メッセージ オブジェクトを返します。さらに、デフォルト言語とフォールバック言語は、環境変数 VUE_APP_I18N_LOCALE および VUE_APP_I18N_FALLBACK_LOCALE を通じて設定できます。

コンポーネントの $te メソッドを使用してキー値が存在するかどうかを確認し、$d メソッドを使用して日付をフォーマットします。

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

上記は、Vue を使用して多言語化と国際化を実現する基本的な方法です。 Vue-i18n プラグインまたは Vue CLI プラグインを使用すると、多言語および国際化機能を簡単に実装でき、Web サイトやアプリケーションをグローバル化の傾向にさらに適合させることができます。

以上がVue を使用して多言語化と国際化を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。