vue-i18n的简单使用

1. npm install vue-i18n –save

2. 在mian.js中引入 vue-i18n

           // 引入i18n国际化插件
           import VueI18n from 'vue-i18n'
   
           Vue.use(VueI18n)
   
           // 注册i18n实例并引入语言文件，文件格式等下解析
           const i18n = new VueI18n({
           locale: 'zh',
           messages: {
               'zh': require('@/assets/languages/zh.json'),
               'en': require('@/assets/languages/en.json')
           }
           })
           //将i18n注入到vue实例中
           new Vue({
           el: '#app',
           router,
           store,
           i18n,
           })
   

3.在创建

assets/languages/en.json文件和assets/languages/zh.json文件

        zh.json   {
          "Homepage":{
              "home":"首页"
              "login":"登录"
               "register":"注册"
          }
        }
        en.json {
          "Homepage":{
              "home":"Home"
              "login":"Login"
               "register":"Register"
          }
        }
4.在html文件中
        使用的时候 {{$t(Homepage.home)}}取值

5.在方法中应用 changelang(){ this.i18n.locale ==="en"?"zh":"en"
}