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"
}