How to set up multi-language support in vue project (i18n plug-in)

First, you can download the official documentation
of the i18n plug-in and introduce the process:

• Install plugin

npm install vue-i18n

• introduce
  

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import msgs from '@/utils/lang/messages';

// 注册i18n
Vue.use(VueI18n);

function toLowerCaseKey(obj) {
    
    
    // iOS safari 10.2之前 语言代码为小写
    Object.keys(obj).forEach((key) => {
    
    
        obj[key.toLowerCase()] = obj[key];
    });
    return obj;
}

const locale = navigator.language || navigator.userLanguage;

// iOS safari 10.2之前 语言代码为小写
const messages = toLowerCaseKey({
    
    ...msgs });

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
    
    
    locale, // 设置地区
    fallbackLocale: 'en',
    silentFallbackWarn: true, // 避免fallbackLocale警告
    messages, // 设置地区信息
});
// window下挂载i18n,vue对象之外通过window对象实现多语言
window.i18n = i18n;

export default i18n;

msgs is the local language package.
The local language package directory is as follows:

where: messages.js is the overall configuration

import en from './en';
import zh from './zh';
import zhCN from './zh-CN';
import ja from './ja';
import th from './th';
import vi from './vi';

export default {
    
    
    en,
    'zh-HK': zh,
    'zh-MO': zh,
    'zh-SG': zh,
    'zh-TW': zh,
    zh: zhCN,
    th,
    ja,
    vi,
};

Other files are corresponding to the local language. Just find two and have a look:

//ja.js
import shareIcon from '@/images/share-icon-ja.png';
export default {
    
    
    teacherOnWay: '先生が教室に入ってくるのを待ちます。',
    exitRoom: 'クラスに入るのをやめますか？',
    backRoom: '「クラスに入る」をクリックすると、再入室できます。',
    btnGot: '了解',
    btnOK: '確認',
    btnCancel: 'キャンセル',
    shareIcon,
};

//en.js
import shareIcon from '@/images/share-icon-en.png';
export default {
    
    
    teacherOnWay: 'Teacher is on the way.',
    exitRoom: 'Exiting the classroom?',
    backRoom: 'You can click button "Enter" to get back in.',
    btnGot: 'Got it',
    btnOK: 'OK',
    btnCancel: 'cancel',
    shareIcon,
};

• use
  • First, introduce it under the vue object

    import Vue from 'vue';
    import i18n from '@/plugins/i18n';
    new Vue({
        
        
    	router,
    	i18n,
    	store,
    	render: (h) => h(Base),
    }).$mount('#container');
  

  • used in templates

                   <button
                       class="btn-default help"
                       @click.stop="getHelp">
                       {
        
        {
        
         $t('help') }}
                   </button>
  

  • Used in js

    async created() {
        
        
        window.setTimeout(() => {
        
        
            Indicator.open(this.$t('joinRoom'));
        }, 100);
        this.$store.commit('user/initState', {
        
         parent: true, checkify: true });
        // 判断是不是国际版app,国际版不显示求助和反馈问题
        this.isInternatioal = await this.internationalEdition();
    }
  

  Here's what needs to be paid attention to -
  how to implement multi-language outside of the vue object, such as some tool classes and some public js methods. One method that comes to mind here is to mount the i18n object to the window object when introducing the i18n object in plugins (the above code includes the mounting step). The following is an example of use.

            let defaultOpt = {
    
    
                content: window.i18n.t('lateTip', {
    
     msg: latemin }),
                backDismiss: false,
                buttons: [window.i18n.t('btnGot')],
            };