Use vue-i18n en vue3 (use $t en ts, vue3 no usa esto)

El vue-i18n que ha estado utilizando la herramienta multilingüe en el proyecto vue.
No hay gran problema con el vue2 usado antes, solo use t ("su nombre de atributo") después de la configuración, y ahora vue3 en realidad no ha cambiado mucho.
Pero una vez completada la configuración, no hay problema en usarlo en html $t(), y todo lo que muestra la redacción es normal. Sin embargo, cuando utilicé el método en ts $t()para informar un error, luego descubrí que no configuré un $t()método global.

Registre el método de uso de vue-i18n en vue3:

1. Instalar vue-18n
2. configuración
3. solicitud
4. Monte el método global $t para facilitar su uso en ts (el enfoque de este registro)

Dado que muchas personas han escrito 1.2.3., lo escribiré brevemente. El enfoque de este registro es 4, porque descubrí que muchos blogs en Internet solo escribieron sobre el uso de $t en html, pero la mayoría de ellos no. mencionarlo También se puede usar en ts.

1. Instalar

npm install vue-i18n@next 或 yarn add vue-i18n@next

2. Cree un nuevo idioma en el directorio src y cree un nuevo archivo index.ts

import App from '@/App.vue'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import enLocale from './en/index';
import zhLocale from './zh/index';

const messages = {
    zh: zhLocale,
    cn: zhLocale,
    en: enLocale,
    us: enLocale,
    
}

const localLang = navigator.language.split('-')[0];
const storageLang = window.localStorage.getItem('locale')?.split('"')[1].split('"')[0].toLocaleLowerCase() || 'en';
const c = (storageLang.toLocaleLowerCase() !== 'zh' && storageLang.toLocaleLowerCase() !== 'en') ? 'en' : storageLang;

const i18n = createI18n({
    globalInjection: true, //全局生效$t
    locale: c || localLang || 'en',
    messages,
    legacy: false,
})

const app = createApp(App)
app.use(i18n)

El contenido de index.ts de los dos paquetes de idioma de la figura anterior se escribe de acuerdo con las necesidades del idioma:

export default {
    nNation: 'Country/Region',
    pleaseInput: 'Account',

}

4. Usa el método global $t en ts

import { getCurrentInstance } from "vue";
const { appContext : { config: { globalProperties } } } = getCurrentInstance();  // 这里可以根据需要写个hook
console.log(globalProperties.$t('pleaseSelectNation'))

Es más normal usar en html:

<span>{
   
   { $t("nation") }}</span>

De hecho, este artículo es un novato para registrar el uso de globalProperties, espero que te sea útil.