14.i18n在vue项目中使用(国际化)

i18n：i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。
1.安装vue-i18n

npm install vue-i18n --save

2.main.js中全局引入i18n

import VueI18n from "vue-i18n";

3.注册：

Vue.use(VueI18n);

4.实例化i18n并引入语言文件：

const i18n = new VueI18n({
  locale: "en",//语言标识
  messages: {//配置多语言 根据自己的项目需求  这里配置了中文和英文
    'zh': require('@/lang/zh.js'),//中文
    'en': require('@/lang/en.js'),//英文
  },
  fallbackLocale: "zh",//没有英文的时候默认 中文语言
  silentTranslationWarn: true,//报错时加上这个参数可以取消警告
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
});

5.在vue实例中注册：

let VM = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

6.src/lang/zh.js：

module.exports = {
    name:"今天天气真好啊",
    m:{
        a:"锄禾日当午",
        b:"汗滴禾下土"
    }
}
src/lang/en.js：
module.exports = {
    name:"farmers are weeding at noon",
    m:{
        a:"Sweat drops on the soil"
    }
}

7.页面中使用：

     <h1>{{$t('name')}}</h1>
        <h1>{{$t('m.a')}}</h1>
        <h1>{{$t('m.b')}}</h1>
        <button @click="toggleLang">语言切换</button>

动态切换多语言：
 toggleLang(){
            if(this.$i18n.locale == 'en'){
                this.$i18n.locale = 'zh'
            }else{
                this.$i18n.locale = 'en'
            }
        }