简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > Vue.js > 本文

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

王林
リリース： 2023-10-08 13:39:25
オリジナル
1656 人が閲覧しました

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

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

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

1. 準備

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

npm install vue-i18n --save

  1. 言語リソース ファイルの作成
    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')

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

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

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！