Vue プロジェクトで多言語切り替えと国際化を実装する方法

Vue プロジェクトで多言語の切り替えと国際化を実現する方法

はじめに:
現在のグローバリゼーションの状況では、多くの Web サイトやアプリケーションが多言語の切り替えと国際化を実現する必要があります。 -さまざまなユーザーグループのニーズを満たすための言語サポート。人気のあるフロントエンド フレームワークとして、Vue は複数言語の切り替えと国際化を実現する便利な方法も提供します。この記事では、Vue プロジェクトで多言語切り替えと国際化を実装する方法と、具体的なコード例を紹介します。

1. 準備

1. 必要な依存関係のインストール
   開始する前に、多言語サポートを実現するために vue-i18n プラグインをインストールする必要があります。プロジェクトのルート ディレクトリで、コマンド ライン ツールを開き、次のコマンドを実行します:

npm install vue-i18n --save

2. 言語リソース ファイルの作成
   src ディレクトリの下に locales フォルダーを作成し、en.json や zh.json などの複数の言語で JSON ファイルを作成します。これらのファイルには、さまざまな言語の翻訳データが保存されます。

英語を例として、次のコンテンツを en.json に追加します:

{
"header": "Welcome to my website!",
" content ": "これは多言語サポートのための Vue プロジェクトです。",
"button": "Switch Language"
}

次のコンテンツを zh.json に追加します:

{
"header": "私の Web サイトへようこそ!",
"content": "これは、Vue を使用して多言語サポートを実装するプロジェクトです。",
"button": "言語の切り替え"
}

2. 構成と使用

1. vue-i18n のインポートと構成
   main.js ファイルで、最初に vue-i18n をインポートする必要があります。 i18n を選択して設定します。ファイルの先頭に次のコードを追加します:

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

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: 'en', // デフォルトの言語は英語です
メッセージ: {

en: require('./locales/en.json'),
zh: require('./locales/zh.json')

}
})

new Vue ({
i18n,
render: h => h(App)
}).$mount('#app')

2. 複数使用コンポーネント内の言語
   次に、多言語サポートが必要なコンポーネントでは、this.$t を使用して翻訳されたテキストを取得できます。たとえば、Header.vue コンポーネントでは、次のように使用できます:

3. 言語切り替え機能を実装するには、コンポーネントにボタンを追加してこれを呼び出します。$i18nクリックイベントの .locale メソッドで現在の言語を切り替えます。たとえば、Header.vue コンポーネントに次のコードを追加できます: