序文最近、複数の国で使用され、多言語切り替えをサポートする必要があるプロジェクトを引き継ぎましたので、ここで記録しておきます。 次の問題を解いてください。
複数の言語を切り替えるにはどうすればいいですか?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 の基本クイックスタート知識のまとめ (マインドマップ付き)
目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...
目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....
MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...
フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...
目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...
IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...
CentOS 7 の yum ソースには、MySQL を正常にインストールするための mysql-s...
導入同社の最近の Vue フロントエンド プロジェクトの要件: ポップアップ ウィンドウのドラッグ、...
Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...
この記事の例では、画像切り替え効果を実現するためのVueの具体的なコードを参考までに共有しています。...
トリガーにより、ステートメントの実行前または実行後に他の SQL コードを実行できます。トリガーは、...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...