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

npm i vue-i18n --save

定数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)
}

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

<テンプレート>
    //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>
</テンプレート>

// -  -  -  -  -  -  -  -  -  -  -  州 -  -  -  -  -  -  -  -  -  -  -  -  -  - -
'@/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'

'@/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言語
    }
  }
}

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

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

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

'./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'),
   タイプ: '警告'
 });

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