vue-il8n

1.cnpm install vue-i18n
2.main.js

import VueI18n from 'vue-i18n'
import {getCookie} from '../common/lang/getCookie'

Vue.use(VueI18n)            // 通过插件的形式挂载
const i18n = new VueI18n({
  locale:getCookie('PLAY_LANG','zh'),    // 自动判断语言标识
  // messages, // set locale messages
  messages: {
    'zh': require('../common/lang/zh'),   // 中文语言包
    'en': require('../common/lang/en')    // 英文语言包
  }

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

})

getCookie.js

function getCookie(defaultValue) {
  var language = navigator.browserLanguage?navigator.browserLanguage:navigator.language;
  console.log(language);
  if (language.indexOf('en') > -1) return 'en';
  else if (language.indexOf('ja') > -1) return 'en';
  else if (language.indexOf('zh') > -1) return 'zh';
  else
    return 'zh'
}

export {
  getCookie
}

en.js

module.exports = {
  message: {
    title: 'Sport Brands'
  },
  placeholder: {
    enter: 'Please type in your favorite brand'
  },
  brands: {
    nike: 'Nike',
    adi: 'Adidas',
    nb: 'New Banlance',
    ln: 'LI Ning'
  }
}

zh.js

module.exports = {
  message: {
    title: '运动品牌'
  },
  placeholder: {
    enter: '请输入您喜欢的品牌'
  },
  brands: {
    nike: '耐克',
    adi: '阿迪达斯',
    nb: '新百伦',
    ln: '李宁'
  }
}

{{ $t('brands.nike') }}<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>      


  methods:{
    changeLocale:function () {
      let locale = this.$i18n.locale
      locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
    }
  }