Vue で多言語切り替えを実装する方法

Vue で多言語切り替えを実装する方法

グローバリゼーションの発展に伴い、多言語 Web サイトの要件がますます一般的になりました。 Vue 開発においては、多言語切り替えをどのように実装するかが重要な課題となります。この記事では、Vue で多言語切り替えを実装する方法と具体的なコード例を紹介します。

1. 準備
多言語切り替えの実装を開始する前に、多言語に必要な言語パッケージを準備する必要があります。言語パックは、サポートする必要があるすべての言語を含む JSON ファイルであり、各言語は 1 つの JSON ファイルに対応します。たとえば、次のように、英語 (en.json) と中国語 (zh.json) の 2 つの言語パッケージを用意しました。

en.json:
{
"hello": " Hello ",
"world": "ワールド",
"welcome": "私の Web サイトへようこそ!"
}

zh.json：
{
" こんにちは。 ": "Hello",
"world": "World",
"welcome": "Welcome to my website!"
}

2. 言語切り替えコンポーネントを作成します
LanguageSwitcher という名前のコンポーネントを作成して、言語切り替えを実装できます。このコンポーネントには、言語を切り替えるためのドロップダウン メニューが含まれています。このコンポーネントのデータでは、変数 currentLanguage を設定して、現在選択されている言語を記録できます。

<select v-model="currentLanguage" @change="changeLanguage">
  <option value="en">English</option>
  <option value="zh">中文</option>
</select>

<スクリプト>
デフォルトのエクスポート {
data() {

return {
  currentLanguage: "en"
};

},
メソッド: {

changeLanguage() {
  // 在这里更新语言
}

}
};

3. 言語切り替えロジックを実装する
LanguageSwitcher コンポーネントのchangeLanguage メソッドでは、選択した言語に従って現在の言語を更新し、対応する言語パッケージを Vue インスタンスにインポートできます。

「./言語/en.json」から en をインポート;
「./言語/zh.json」から zh をインポート;

changeLanguage() {
if ( this.currentLanguage === "en") {

this.$root.$data.language = en;

} else if (this.currentLanguage === "zh") {

this.$root.$data.language = zh;

}
}

Vue インスタンスでは、現在の言語パッケージを保存するための変数言語を定義できます。

new Vue({
data() {

return {
  language: {}
};

}
}).$mount("#app");

4. さらに使用する言語
言語パックを Vue インスタンスにインポートすると、アプリケーション内のどこでも複数の言語を使用できるようになります。現在の言語パックには、$root. language を使用してアクセスできます。