Vue2, vue3 usan i18n para lograr la internacionalización

1. Efecto objetivo

       Dirección del código fuente: git clone  i18n-demo: vue2, vue3 implementa la función de internacionalización i18n 

        El idioma predeterminado es el chino:

        Haga clic en el interruptor de idioma para cambiar a inglés (el chino y el inglés simplemente se configuran aquí)

 

        Nota: ¡vue2 es compatible con vue-i18n versión 8.0+, vue3 es compatible con vue-i18n versión 9.0+! ! ! ! ! !

Dos, vue2 se da cuenta de la internacionalización de i18n

        (1) Cree una carpeta local en src para identificar los códigos relacionados con la internacionalización ( puede elegir cualquier nombre )

        (2) Cree una carpeta lang en la carpeta locale para la traducción manual del idioma del país de destino, y el archivo index.js exportará la instancia i18n a main.js

         (3) El archivo locale/index.js se usa para instanciar el complemento i18n y usar el complemento i18n en vue, los mensajes son los paquetes de idioma para la traducción automática

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh',
    messages,
});
export default i18n;

        (4) zh.js representa el paquete de traducción al chino, en.js representa el paquete de traducción al inglés

 zh significa que el idioma de destino es chino, i18n puede reconocerlo

export default {
    zh: {
        title: '后台管理系统',
        schoolModule: {
            title: '学校模块',
            kindergarten: '幼儿园',
            primary: '小学',
            junior: '初中',
            senior: '高中',
            university: '大学'
        }
    }
}

en.js significa que el idioma de destino es el inglés, i18n puede reconocerlo

export default {
    en: {
        title: 'management system',
        schoolModule: {
            title: 'schoolModule',
            kindergarten: 'kindergarten',
            primary: 'primary',
            junior: 'junior',
            senior: 'senior',
            university: 'university'
        },
    }
}

locale/lang/index.js es la exportación de todas las traducciones del idioma del país de destino, que son los mensajes de la figura anterior

import zh from './zh'
import en from './en'
export default {
    ...en,
    ...zh
}

        (5) uso

• Usado en la plantilla como  $t('título')
• Use this.$i18n.locale en el script   para obtener el tipo de idioma actual, this.$t('title') : Obtenga el resultado de la traducción del idioma actual  

3. vue3 realiza la internacionalización i18n

        (1) El contenido de la carpeta lang debajo de la carpeta de configuración regional del archivo vue3 es exactamente el mismo que el anterior, la diferencia es que vue3 instancia i18n de manera diferente

        (2) configuración regional/index.js

import { createI18n } from 'vue-i18n'

import messages from './lang'
const i18n = createI18n({
    legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
    locale: 'zh',
    messages
})

export default (app) => {
    app.use(i18n)
}

        (3) principal.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入多语言
import lang from './locale'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// 将多语言挂在到vue中
lang(app)

app.use(store)
    .use(ElementPlus)
    .use(router)
    .mount('#app')

        (4) uso

• Usado en la plantilla como  $t('título')
• guión utilizado como

        importar { useI18n } desde 'vue-i18n'

        

        // locale es el valor de respuesta

        const { t, configuración regional } = useI18n();

        

        consola.log('t:', t('título'))

        console.log('locale:', locale.value)