Vue2, vue3 use i18n to achieve internationalization

1. Target effect

       Source code address: git clone  i18n-demo: vue2, vue3 implement i18n internationalization function 

        The default language is Chinese:

        Click the language switch to change to English (Chinese and English are simply set here)

 

        Note: vue2 supports vue-i18n version 8.0+, vue3 supports vue-i18n version 9.0+! ! ! ! ! !

Two, vue2 realizes i18n internationalization

        (1) Create a locale folder under src to identify internationalization-related codes ( you can choose any name )

        (2) Create a lang folder under the locale folder for manual translation of the target country language, and the index.js file will export the i18n instance to main.js

         (3) The locale/index.js file is used to instantiate the i18n plug-in, and use the i18n plug-in in vue, messages are the language packs for automatic translation

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 represents the Chinese translation package, en.js represents the English translation package

 zh means the target language is Chinese, i18n can recognize it

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

en.js means the target language is English, i18n can recognize it

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

locale/lang/index.js is the export of all target country language translations, which is the messages in the above figure

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

        (5) use

• Used in template as  $t('title')
• Use this.$i18n.locale in the script   to get the current language type, this.$t('title') : Get the current language translation result  

3. vue3 realizes i18n internationalization

        (1) The content of the lang folder under the locale folder of the vue3 file is exactly the same as above, the difference is that vue3 instantiates i18n differently

        （2）locale/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）main.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) use

• Used in template as  $t('title')
• script used as

        import { useI18n } from 'vue-i18n'

        

        // locale is the responsive value

        const { t, locale } = useI18n();

        

        console.log('t:', t('title'))

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