vue中如何实现中英或多语言切换

为什么要多语言切换呢 因为我们要前端国际话 今天就给大家讲解一下如何实现多语言切换

首先使用cmd窗口安装 vue-i18n 包
npm install vue-i18n --save-dev

然后在main.js中引入

import VueI18n  from 'vue-i18n' //导入包
Vue.use(VueI18n);      //使用use挂载
const i18n=new VueI18n({    //通过new出一个i18n的实例
       locale: 'zh-CN',    // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
        messages: {
          'zh-CN': require('./../static/lang/zh'),   // 中文语言包
          'en-US': require('./../static/lang/en.js'),   // 英文语言包
}
})

定义 两个语言包 可在statis 或src 都可以 路径自己定义

内容en.js

内容zh.js

注意划红线的地方 首先对象名称保持一致 还有属性名保持一致 这是重点**！！！！！**

开始使用并且实现语言切换
i18n支持插值表达式

  <li>{{$t('a.InvitationLink')}}</li>
  //实现下拉菜单语言切换
   <el-select v-model="curLanguage" placeholder="请选择"
          @change="Onchange"
          style="width: 1rem;"

          >
            <el-option v-for="item in languageOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
//js代码
export default {
    name: 'headers',
    data() {
      return {
        curLanguage:0,
        languageOption: [{
              value:0,
              label:'中文',
        },
        {
         value:1,
         label:'英文',
        }
        ]

      }
    },
    mounted() {

    },
    methods:{
      Onchange(e){
         if(e===0){
           this.lang = "zh-CN";
           this.$i18n.locale = this.lang;
         }else{
           this.lang = "en-US";
           this.$i18n.locale = this.lang;
         }
      }
    }
  }

使用的是element-ui插件的下拉菜单 看不懂的可以去观看查看点这里
实现更多语言只要在加入 语言包就可以了。