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 を展開するプロセスの詳細な説明

推薦する

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

Vue テンプレートのコンパイルの詳細

目次1. 解析する1.1 傍受のルール1.2 傍受プロセス部分1.3 パーサーの概要2. 最適化する...

InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...

MySQL 8.0.22 圧縮パッケージの完全なインストールと構成のチュートリアル図 (テスト済みで効果的)

1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...

ウェブページの読み込み速度を上げる簡単なヒント

Web ページの読み込み速度は、Web サイトの品質を評価するための重要な指標です。その理由は、ほと...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ

Tomcat8 イメージをダウンロード [root@localhost ~]# docker sea...

Ubuntu 18仮想マシンのクローン作成後に同じIPアドレスになる問題の解決方法

序文最近、仮想マシンを使用して Ubuntu 18.04 をインストールしました。クローン作成後、I...

ページネーションの例とベストプラクティス

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

MySQL で中国語の文字をピンインでソートする簡単な例

名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...

Vueでアイコンをカスタマイズする手順

ant-design-vue は Ali iconfont icons の使用をカスタマイズします\...

CentOS7.5 MySQLのインストールチュートリアル

1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...

フォームアクションとonSubmitの例

まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...