Vue はウェブページの言語切り替えの国際化を実装します

1. 基本的な手順

1: yarn add vue-i18nをインストールする

このパスに新しい .js ファイルを作成します: src/lang/index.js :

2: インポート

'vue-i18n' から VueI18n をインポートします

3: 登録する

'vue' から Vue をインポートします

Vue.use(VueI18n)

4: インスタンス化

定数i18n = 新しいVueI18n({
	locale:'現在の言語識別子', // en: 英語 zh: 中国語 メッセージ:{
		// 言語パック en:{
		ホーム:'ホーム'
		},
		:{
		ホーム:'ホーム'
		}
	}
})

5: 露出

デフォルトの i18n をエクスポートする

6: main.jsにマウントする

'@/lang' から i18n をインポートします
新しいVue({
国際化
})

使用方法: <div>{ {$t('home')}}</home>

2. main.jsにelement-uiの国際言語設定をインポートする

'./lang/index' から i18n をインポートします
'element-ui' から ElementUI をインポートします。
Vue.use(ElementUI, {
  i18n: (キー、値) => i18n.t(キー、値)
})

3. ボタンで言語を切り替えるための新しい.vueファイルを作成する

知らせ：

this.$i18n.locale は現在の言語を取得および設定し、js ファイルで国際化を使用できます。

4. ウェブサイトメニューの国際化を実現するには、ルーティングに導入する必要があります。

import i18n from '@/lang' i18n.t===this.$t

これで、Vue による Web ページ言語の国際化の実装に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。