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

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 を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体
  • Vue が i18n を使用して国際化を実現する方法の詳細な説明
  • vue 国際化 i18n を使用して複数の言語切り替え機能を実装する
  • vue プロジェクトにおける vue-i18n と element-ui の国際開発と実装プロセス
  • Vueは国際化コードを実装するためにvue-i18nを使用します

<<:  フォームタグの Enctype 属性とその応用例の紹介

>>:  docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

推薦する

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

Dockerイメージが消える問題を解決する

1. 50と93では鏡像が消える [root@h50 /]# df -h ファイルシステムの使用済み...

js を使用して QR コードを生成するサンプル コード

以前、プロジェクトでQRコードをスキャンして情報を表示する機能を開発する必要がありました。インターネ...

JavaScript フロー制御 (分岐)

目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

Linux システムで .sh ファイルを実行する方法

Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

HTML でナンバープレート番号と州の略語を入力するためのサンプルコード

原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...

JS の compose 関数と pipe 関数の使い方の詳細な説明

目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...

JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ

要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...

ウェブサイトアイコンを追加するにはどうすればいいですか?

最初のステップは、アイコン作成ソフトウェアを準備することです。まず、いわゆるアイコンは拡張子 .ic...

複数のパッケージソースから同時にパッケージをロードするようにnpmを設定する方法

目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...

springcloud alibaba nacos linux 設定の詳細なチュートリアル

まず、github から nacos の圧縮パッケージをダウンロードします: https://git...