vue项目用i18n实现多语言国际化

淡淡的烟草味﹌ 2023-06-06 10:44 149阅读 0赞

###### 1.下载vue-i18n包 ######

`npm install vue-i18n --save`  
package.json会出现如下内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]

###### 2.main.js引入vue-i18n ######

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    const i18n = new VueI18n({ 
        locale: 'zh-CN',
        messages: { 
            'zh-CN': require('./common/lang/zh'),
            'en-US': require('./common/lang/en')
        }
    })
    new Vue({ 
        el: '#app',
        render: h => h(App),
        i18n,
        router,
        store,
        components: {  App },
        template: '<App/>'
    })

###### 3.创建语言目录，如下： ######

![在这里插入图片描述][20191011104227956.PNG]  
文件内容如下：  
zh.js:

export const m = { 
        Login_Name: '登录',
        Register_Name: '注册',
    }

en.js:

export const m = { 
        Login_Name: 'Login',
        Register_Name: 'Register',
    }

###### 4.vue组件内引入和调用方法 ######

//Header.vue
     <router-link to="/register">/{ { $t('m.Register_Name')}}</router-link> 
     <a @click="changeLangEvent">主题语言</a> 
    
    //script
        export default { 
            name:'Header',
             data(){ 
                return{ 
                      lang: 'zh-CN',//select选中的值
    
                }
    
            },
            methods: { 
                //切换语言
             changeLangEvent() { 
                this.$confirm('确定切换语言吗?', '提示', { 
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {                    
                    if (this.lang === 'zh-CN' ) { 
                        this.lang = 'en-US';
                        this.$i18n.locale = this.lang;//关键语句
                        this.$message({ 
                        message:'change success ！',
                        type: 'info',});
                    }else { 
                        this.lang = 'zh-CN';
                        this.$i18n.locale = this.lang;//关键语句
                        this.$message({ 
                        message:'切换成功！',
                        type: 'info',});
                    }
                    }).catch(() => { 
                    this.$message({ 
                        message:'操作取消！',
                        type: 'info',
                    });          
                    });
    
           },
         }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]: /images/20230601/8dac8f7be67d4710aeb2e71b7b2731bb.png
[20191011104227956.PNG]: /images/20230601/a9618e5b6ba34d1fa9cbcedc7bfe1d53.png