Vue で多言語と国際化を処理する方法

Vue で多言語と国際化に対処する方法

今日のグローバル環境では、世界中のユーザーにより良いサービスを提供するために、多言語と国際化が重要になっています。 Web サイトまたはアプリケーションの基本的なニーズ。人気のあるフロントエンド フレームワークとして、Vue は多言語と国際化への対応に役立つシンプルかつ強力なツールを提供します。

1. 準備
始める前に、Vue とその関連プラグインをインストールする必要があります。まず、Node.js と npm がインストールされていることを確認してください。コマンド ラインで次のコマンドを実行して、Vue CLI (コマンド ライン ツール) をインストールします:

npm install -g @vue/cli

次に、Vue CLI を使用して新しい Vue プロジェクトを作成します:

vue create my-app

プロンプトに従って構成を選択します。デフォルトの構成を選択できます。プロジェクトが作成されたら、プロジェクト フォルダーに入ります:

cd my-app

vue-i18n プラグインをインストールします。これは、Vue によって公式に推奨されている国際的なプラグインです:

npm install vue-i18n

インストールが完了したら、多言語化と国際化への対応を開始できます。

2. 言語ファイルを作成します
src フォルダーの下に locales フォルダーを作成し、その中に en.json## を作成します #そして zh.json ファイル。これら 2 つのファイルは、それぞれ英語と中国語の翻訳テキストを保存するために使用されます。

en.json の例:

{
  "hello": "Hello",
  "welcome": "Welcome to my app"
}

zh.json の例:

{
  "hello": "你好",
  "welcome": "欢迎来到我的应用"
}

3.

src
フォルダーで Vue-i18n を構成します。 i18n フォルダーを作成し、その中に index.js ファイルを作成します。

index.js のコードは次のとおりです。

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

Vue.use(VueI18n)

const messages = {
  en: require('./locales/en.json'),
  zh: require('./locales/zh.json')
}

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

export default i18n

最初に Vue と VueI18n をインポートし、Vue.use() メソッドを使用して VueI18n プラグインをインストールします。

次に、英語と中国語の翻訳されたテキストを含む

messages オブジェクトを定義します。

次に、VueI18n インスタンスを作成し、

locale プロパティと fallbackLocale プロパティを指定して、デフォルト言語とフォールバック言語を設定します。最後に、messages オブジェクトをパラメーターとして VueI18n のコンストラクターに渡します。

最後に、Vue コンポーネントで使用するために i18n インスタンスをエクスポートします。

4. 複数の言語の使用

Vue コンポーネントで複数の言語を使用するのは非常に簡単です。翻訳する必要があるテキストで
$t() メソッドを使用し、対応するキー名を渡すだけです。

サンプル コードは次のとおりです。

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

上記の例では、

$t('hello') と $t('welcome') は、現在の言語環境に従って、対応するテキストに自動的に翻訳されます。

5. 言語の切り替え

Vue-i18n は、ロケールに応じてテキストを自動的に翻訳するだけでなく、言語を切り替える方法も提供します。

サンプル コードは次のとおりです。

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n'

export default {
  methods: {
    changeLanguage(lang) {
      i18n.locale = lang
    }
  }
}
</script>

上の例では、言語を切り替えるボタンに

changeLanguage メソッドをバインドし、さまざまなパラメーターを渡しました。 changei18nインスタンスのロケール。

6. 概要

Vue-i18n プラグインを使用すると、多言語および国際化への対応が非常に簡単になります。言語ファイルを準備し、Vue-i18n を設定して、翻訳する必要があるテキストで
$t() メソッドを使用するだけです。

この記事が、Vue の多言語と国際化の問題にすぐに取り組むのに役立つことを願っています。

以上がVue で多言語と国際化を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。