需求 : 簡單來說就是一鍵切換中英文兩種狀態

解決方式 : 

1,安裝  vue-i18n

 npm install vue-i18n

2,將中英文js檔案引入,在src下新建comment資料夾

如圖:    

3,在main.js 引入必要的資源

import VueI18n from 'vue-i18n'
const i18n = new VueI18n({
  locale: 'zh-CN', // 語言標識
  //this.$i18n.locale, // 通過切換locale的值來實現語言切換
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文語言包
    'en-US': require('./common/lang/en') // 英文語言包
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘記
 

  // store,
  router,
  components: { App },
  template: '<App/>'
})

4,在components元件的使用方式

例: 

<a class="h-logo" @click="change()">{{$t('m.logout')}}</a> <span><a href="">{{$t('m.1to2Years')}}</a></span> <span><a href="">{{$t('m.abnormalCo')}}</a></span>

data() {
  return {
    lang: 'zh-CN'
  }
},
methods: {
  //切換語言
  changeLangEvent() {
    if (this.lang === 'zh-CN') {
      this.lang = 'en-US';
      this.$i18n.locale = this.lang;
    } else {
      this.lang = 'zh-CN';
      this.$i18n.locale = this.lang;
    }
  },

 data() {
        return {
          // options: [
          //   this.$t('text.volume_24H'), this.$t('text.market')
          // ],
          lang: 'zh-CN'
        }
      },
      methods: {
        //切換語言
        changeLangEvent() {
          if (this.lang === 'zh-CN') {
            this.lang = 'en-US';
            this.$i18n.locale = this.lang;
          } else {
            this.lang = 'zh-CN';
            this.$i18n.locale = this.lang;
          }
        },
 

備註 :   也可以參考GitHub這個地址...