Vue要素と多言語切り替えの詳細な説明

Vue要素と多言語切り替えの詳細な説明

序文

最近、複数の国で使用され、多言語切り替えをサポートする必要があるプロジェクトを引き継ぎましたので、ここで記録しておきます。

次の問題を解いてください。

  • 複数の言語を切り替えるにはどうすればいいですか?
  • 言語を動的に切り替えて elementUI 言語を変更するにはどうすればいいですか?
  • elementUI コンポーネントビューを変更した後、更新されませんか?
  • $t 関数をグローバルに使用するにはどうすればいいですか?
  • js ファイルで vue-i18n を使用するにはどうすればいいですか?

複数の言語を切り替えるにはどうすればいいですか?

1. vue-i18nパッケージをインストールする

npm i vue-i18n --save

2. 以下に示すように、src ディレクトリに新しいものを作成します。

ここに画像の説明を挿入

en.js

定数EN = {
  ログイン: {
    タイトル: 「ユーザーログイン」
  },
}
エクスポートデフォルト EN

pl-pl.js

定数PL_PL = {
  ログイン: {
    タイトル: 「私はとても良い人です」
  },
}
エクスポートデフォルトPL_PL

zh-cn.js

定数ZH_CN = {
  ログイン: {
    タイトル: 「ユーザーログイン」
  },
}
エクスポートデフォルトZH_CN

index.js

'vue-i18n/index' から {createI18n} をインポートします。
'dayjs/locale/zh-cn' をインポートします
'./zh-cn' から zh をインポートします
'./en' から en をインポートします
'./pl-pl' から pl をインポートします
定数メッセージ = {
  'zh-cn': zh、
  'en': エン,
  'pl': プラス
}
// 現在のロケールを取得します
エクスポート関数 getLanguage() {
  // 選択した言語を使用する 
  const chooselang = localStorage.getItem('locale')
  if (chooselang) は chooselang を返します
  // 言語を選択しない場合は
  const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
  const ロケール = Object.keys(メッセージ)
  locales.includes(lang) を返します。lang : 'zh-cn'
}
定数i18n = createI18n({
  ロケール: getLanguage(),
  フォールバックロケール: 'en',
  グローバル: true、
  メッセージ
})
エクスポート関数 $t(args) {
  i18n.global.tc(args) を返す
}
コンソールログ($t('ログイン.タイトル'))
エクスポートデフォルト(アプリ)=> {
  アプリを使用する(i18n)
}

例示する

getLanguage 関数は、現在の localStorage に選択された言語があるかどうかを判断します。ない場合は、現在のブラウザの言語を取得します。
$t関数をカプセル化し、jsファイルで使用できるようにエクスポートします。

3. main.js内

'./language' から language, { getLanguage, $t } をインポートします
言語(アプリ)

4. Vueファイルで使用する

<テンプレート>
    //1. 
	<div class="ログイン クランプ ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div>
	//2.
	<el-input v-model="$t('login.title')"></el-input>
</テンプレート>

言語を動的に切り替えて elementUI 言語を変更するにはどうすればいいですか?

1. vuexを使用して、要素の言語を変更するメソッドをミューテーションで記述する

// -  -  -  -  -  -  -  -  -  -  -  州 -  -  -  -  -  -  -  -  -  -  -  -  -  - -
'@/language' から { getLanguage } をインポートします
定数状態 = {
  言語: getLanguage()
}
デフォルト状態をエクスポート
//---------------------- 変異-----------------------------
'./types' から Types として * をインポートします。
'element-plus/lib/locale' からロケールをインポートします。
'element-plus/lib/locale/lang/zh-cn' から localeZH をインポートします。
'element-plus/lib/locale/lang/en' から localeEN をインポートします。
'element-plus/lib/locale/lang/pl' から localePL をインポートします。
定数要素 = {
  'zh-cn': ロケールZH、
  'en': ロケールEN、
  'pl': ロケールPL
}
const 変異 = {
  // 言語を切り替える [Types.SET_LANG](state, lang) {
    状態.lang = 言語
    localStorage.setItem('ロケール', lang)
    locale.use(要素[lang])
  }
}
デフォルトのミューテーションをエクスポートする
// -  -  -  -  -  -  -  -  -  -  -  - - 種類 -  -  -  -  -  -  -  -  -  -  -  -  -  - -
エクスポート const SET_LANG = 'SET_LANG'

2. 使用

'@/store/types' から Types として * をインポートします。
「vue-i18n」から useI18n をインポートします。
エクスポートデフォルト{
  セットアップ(props,ctx) {
    const { ロケール: lang } = useI18n({ useScope: "global" })
    store = useStore() とします
    const handelLanguage = (名前) => {
      lang.value = 名前
      store.commit(Types.SET_LANG、名前)
    }
    戻る {
      handel言語
    }
  }
}

elementUI コンポーネントビューを変更した後、更新されませんか?

この時点で、elementUI の言語ページを変更するコミットを送信しても、ビュー コンポーネントが更新されないため、変更がないことがわかります。コンポーネントを更新して再読み込みするにはどうすればよいでしょうか。

1. ルータービューでビューの表示/非表示を制御する

// -  -  -  -  -  -  -  -  -  -  -  テンプレート -  -  -  -  -  -  -  -  -  -  -  -  -  - -
<ルータービュー v-if="isReloadRouter"/>
//---------------------- スクリプト----------------------------
定数リロード = () => {
	 state.isReloadRouter = false
     次のティック(() => {
       state.isReloadRouter = true
     })
}
provide("reload", reload)
<-- nextTick を導入する ->

2. 言語を切り替えるときにリロードを呼び出す

 const handelLanguage = (名前) => {
      lang.value = 名前
      store.commit(Types.SET_LANG、名前)
      注入('リロード')()
    }

3. main.jsでcommitを呼び出す必要があります。そうしないと、elementUIに初めて入ったときに言語が変更されません。

'./language' から language, { getLanguage, $t } をインポートします
'@/styles/elementDefault.scss' をインポートします
ストア.コミット(Types.SET_LANG、getLanguage())

$t 関数をグローバルに使用するにはどうすればいいですか? js ファイルで vue-i18n を使用するにはどうすればいいですか?

$t 関数をグローバルに使用し、js ファイル内で $t 関数を直接使用します。

方法 1: app.config.globalProperties を通じてグローバルに設定する

方法2: provideとinjectによる実装

'./language' から language, { getLanguage, $t } をインポートします
const app = createApp(App);
//---------------------- app.config.globalProperties-----------------------------
app.config.globalProperties.$t = $t
// 'vue' から import { getCurrentInstance } を使用します
const { プロキシ } = getCurrentInstance()
プロキシ.$t()
// ----------------------- 提供、注入 -----------------------------
// main.js 内の app.provide('$t', $t)
// const $t = inject('$t') を使用する
ElMessage.警告({
  メッセージ: $t('login.warnMessage'),
   タイプ: '警告'
 });
Vue3はプロトタイプチェーンに何かをマウントすることを推奨していませんが、provideとinjectを使用することを推奨しています。したがって、dependencyとinjectionを通じてprovideとinjectを使用するのが最適です。

router.jsでは$tを直接使用することはできません。この関数を自分でインポートする必要があります。

'@/language' から { $t } をインポートします
{
        パス: '/mainManage/device',
        名前: 'デバイス',
        非表示: false、
        メタ: { アイコン: 'circle'、 タイトル: $t('router.device') },
        コンポーネント: () =>
          インポート(/* webpackChunkName: "device" */ '@/views/mainManage/device')
      },

現在、問題があります。メニューに表示されるフィールドはルーティング情報のタイトルから取得されるため、router.js はプロジェクトに最初に入ったときにのみ呼び出されます。言語を切り替えても、メニュー フィールドは動的に切り替わりません。ブラウザーを更新したときにのみ変更されます。解決策がある場合は、メッセージを残してお知らせください。 ! !

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3でelement-plusを使用する方法の詳細な説明
  • プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Vue プロジェクトで多言語切り替えを実装するためのアイデア
  • vue-i18n を使用して多言語切り替え効果を実現する方法
  • vue 国際化 i18n を使用して複数の言語切り替え機能を実装する
  • Vue の vue-i18 プラグインを使用して多言語切り替え機能を実現する

<<:  テーブルを使用する場合と CSS を使用する場合 (経験の共有)

>>:  MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

推薦する

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

mySQLキーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...

MySQL5.7.27-winx64 バージョン win10 のダウンロードとインストールのチュートリアル図

MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...

MySQLユーザーと権限管理の詳細な説明

この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...

VMware 仮想マシンで Linux の IP アドレスを表示する方法

1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

Dockerでローカルマシン(ホストマシン)にアクセスする方法

質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....

MySQLのよくある間違い

NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

60件のページング事例と優れた実践例を推奨

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

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

Windows サービス 2012 Alibaba Cloud サーバーで MySQL をビルドするときに msvcr100.dll ファイルが見つからないという問題を解決します

解決策1: msvcr100.dll ファイルをダウンロードし (インターネットからソース ファイル...