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 の基本クイックスタート知識のまとめ (マインドマップ付き)

推薦する

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

Alibaba Cloud Centos 7.5 に MySQL をインストールするチュートリアル

CentOS 7 の yum ソースには、MySQL を正常にインストールするための mysql-s...

Vueカスタム指示により、ポップアップウィンドウのドラッグ4辺ストレッチと対角ストレッチ効果を実現

導入同社の最近の Vue フロントエンド プロジェクトの要件: ポップアップ ウィンドウのドラッグ、...

CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります

Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...

Vueは画像切り替え効果を実現

この記事の例では、画像切り替え効果を実現するためのVueの具体的なコードを参考までに共有しています。...

MySQLトリガーの使用

トリガーにより、ステートメントの実行前または実行後に他の SQL コードを実行できます。トリガーは、...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

携帯電話向けウェブページ作成のヒント

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...

MySQL 5.7.17 のインストールと使用方法のグラフィックチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...