序文最近、複数の国で使用され、多言語切り替えをサポートする必要があるプロジェクトを引き継ぎましたので、ここで記録しておきます。 次の問題を解いてください。
複数の言語を切り替えるにはどうすればいいですか?1. vue-i18nパッケージをインストールするnpm i vue-i18n --save 2. 以下に示すように、src ディレクトリに新しいものを作成します。 定数EN = { ログイン: { タイトル: 「ユーザーログイン」 }, } エクスポートデフォルト EN
定数PL_PL = { ログイン: { タイトル: 「私はとても良い人です」 }, } エクスポートデフォルトPL_PL
定数ZH_CN = { ログイン: { タイトル: 「ユーザーログイン」 }, } エクスポートデフォルトZH_CN
'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) } 例示する
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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: テーブルを使用する場合と CSS を使用する場合 (経験の共有)
>>: MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)
MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...
以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...
MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...
この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...
1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...
目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...
質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....
NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...
解決策1: msvcr100.dll ファイルをダウンロードし (インターネットからソース ファイル...