vue、vue-i 18 nを使用して国際化を実現

需要
会社のプロジェクトは国際化が必要で、ボタンをクリックして中国語/英語を切り替えます
1、インストール

npm install vue-i18n --save

2、vueインスタンスに注入し、プロジェクトでapiとテンプレート構文を実現する

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) ;

const i18n = new VueI18n({
    locale: 'zh-CN',    //     ,     locale         ,this.$i18n.locale 
    messages: {
      'zh-CN': require('./common/lang/zh'),   //      
      'en-US': require('./common/lang/en')    //      
    }
})

new Vue({
  el: '#app',
  i18n,  //   
  router,
  template: '',
  components: { App }
})

3、対応言語パック

zh.js     ：

export const lang = {
  homeOverview:'    ',
  firmOverview:'    ',
  firmReports:'    ',
  firmAppendix:'    ',
  firmIndex:'      ',
  firmAnalysis:'    ',
  firmNews:'      ',
  firmOther:'    ',
}

en.js      ：

export const lang = {
  homeOverview:'Home overview',
  firmOverview:'firmOverview',
  firmReports:'firmReports',
  firmAppendix:'firmAppendix',
  firmIndex:'firmIndex',
  firmAnalysis:'firmAnalysis',
  firmNews:'firmNews',
  firmOther:'firmOther'
}

4、ボタン制御切替言語

this.$i18n.locale,     ‘zh-CN’ ，        ；     ‘en-US’ ，     ：

  
 
changeLangEvent() {
    console.log('changeLangEvent');
    this.$confirm('       ?', '  ', {
      confirmButtonText: '  ',
      cancelButtonText: '  ',
      type: 'warning'
    }).then(() => {
      if ( this.$i18n.locale === 'zh-CN' ) {
        this.$i18n.locale = 'en-US';//    
        console.log('en-US')
      }else {
        this.$i18n.locale = 'zh-CN';//    
        console.log('zh-CN')
      }
    }).catch(() => {
      console.log('catch');
      this.$message({
        type: 'info',
      });
    });
  }

4、テンプレートレンダリング
静的レンダリング:

{{$t('lang .homeOverview')}}

   element-ui  ，           
  ：label="    "     :label="$t('order.userName')"

ダイナミックレンダリング:

{{navCompany}}
 computed:{
      navCompany:function(){
        if(this.nav_company){
          let str = 'lang'+this.nav_company;
          return this.$t(str);
        }
      }
},
    
 
    
 

      
              


methods: {
    getTitle(title){
        let str = 'lang.'+title;
        return this.$t(str);
    }
}