Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung

npm ich vue-i18n --speichern

const EN = {
  Anmeldung: {
    Titel: „Benutzeranmeldung“
  },
}
Export Standard DE

Konstante PL_PL = {
  Anmeldung: {
    Titel: „Ich bin ein sehr guter Mensch“
  },
}
Standard PL_PL exportieren

const ZH_CN = {
  Anmeldung: {
    Titel: „Benutzeranmeldung“
  },
}
Exportvorgabe ZH_CN

importiere { createI18n } von 'vue-i18n/index'
importiere 'dayjs/locale/zh-cn'
importiere zh aus './zh-cn'
importiere en von './en'
importiere pl aus './pl-pl'
const Nachrichten = {
  'zh-cn': zh,
  'en': de,
  'pl': pl
}
// Ruft das aktuelle Gebietsschema ab
Exportfunktion getLanguage() {
  // Verwenden Sie die Sprache Ihrer Wahl 
  const chooselang = localStorage.getItem('locale')
  if (Sprache auswählen) returniere „Sprache auswählen“
  // wenn nicht, wähle die Sprache
  const lang = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Objekt.keys(Nachrichten)
  returniere locales.includes(lang) ? lang : "zh-cn"
}
const i18n = erstelleI18n({
  Gebietsschema: getLanguage(),
  FallbackLocale: 'en',
  global: wahr,
  Mitteilungen
})
Exportfunktion $t(args) {
  gibt i18n.global.tc(Argumente) zurück
}
Konsole.log($t('login.title'))
exportiere Standard (App) => {
  app.use(i18n)
}

importiere Sprache, { getLanguage, $t } aus './language'
Sprache (App)

<Vorlage>
    //1. 
	<div Klasse="login clamp ta-c fs-28 fw-b m-b10">{{ $t('login.title') }}</div>
	//2.
	<el-input v-model="$t('login.title')"></el-input>
</Vorlage>

//---------------------- Zustand-----------------------------
importiere { getLanguage } von '@/language'
konstanter Zustand = {
  Sprache: getLanguage()
}
Standardstatus exportieren
//---------------------- Mutationen-----------------------------------------
importiere * als Typen aus './types'
Gebietsschema aus „element-plus/lib/locale“ importieren
importiere localeZH aus „element-plus/lib/locale/lang/zh-cn“
importiere localeEN aus „element-plus/lib/locale/lang/en“
importiere localePL aus „element-plus/lib/locale/lang/pl“
const-Element = {
  'zh-cn': GebietsschemaZH,
  'en': GebietsschemaEN,
  'pl': GebietsschemaPL
}
const Mutationen = {
  // Sprache wechseln [Types.SET_LANG](state, lang) {
    state.lang = lang
    localStorage.setItem('locale', lang)
    locale.use(element[lang])
  }
}
Standardmutationen exportieren
//------------------------- Typen-----------------------------
exportiere const SET_LANG = 'SET_LANG'

importiere * als Typen aus '@/store/types'
importiere { useI18n } von "vue-i18n";
Standard exportieren {
  setup(Requisiten, ctx) {
    const { locale: lang } = useI18n({ useScope: "global" })
    lass speichern = useStore()
    const handelLanguage = (name) => {
      lang.value = Name
      store.commit(Typen.SET_LANG, Name)
    }
    zurückkehren {
      handelSprache
    }
  }
}

//---------------------- Vorlage-----------------------------
<router-view v-if="isReloadRouter"/>
//---------------------- Skript-----------------------------
const neu laden = () => {
	 state.isReloadRouter = false
     nächsterTick(() => {
       state.isReloadRouter = true
     })
}
bereitstellen("neu laden", neu laden)
<-- nextTick bereitstellen ->

 const handelLanguage = (name) => {
      lang.value = Name
      store.commit(Typen.SET_LANG, Name)
      injizieren('neu laden')()
    }

importiere Sprache, { getLanguage, $t } aus './language'
importiere '@/styles/elementDefault.scss'
store.commit(Typen.SET_LANG, getLanguage())

importiere Sprache, { getLanguage, $t } aus './language'
const app = erstelleApp(App);
//---------------------- app.config.globalProperties-----------------------------
app.config.globalProperties.$t = $t
// Verwenden Sie import { getCurrentInstance } von 'vue'
const { proxy } = getCurrentInstance()
proxy.$t()
// ----------------------- bereitstellen, injizieren -----------------------------
// app.provide('$t', $t) in main.js
//Verwenden von const $t = inject('$t').
ElMessage.warning({
  Nachricht: $t('login.warnMessage'),
   Typ: "Warnung"
 });

importiere { $t } von '@/Sprache'
{
        Pfad: '/mainManage/device',
        Name: "Gerät",
        versteckt: falsch,
        Meta: { Symbol: „Kreis“, Titel: $t(„Router.Gerät“) },
        Komponente: () =>
          import(/* webpackChunkName: "Gerät" */ '@/views/mainManage/Gerät')
      },