elementUI+i18n实现国际化语言切换

// en.js
export default {
    message: {
        name: 'name'
    }
}

// zh.js
export default {
    message: {
        name: '名字'
    }
}

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/base.css'
import VueI18n from 'vue-i18n' //引入vue-i18n
import enLocale from 'element-ui/lib/locale/lang/en' //引入Element UI的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入Element UI的中文包

Vue.use(VueI18n)
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置
let lang = (navigator.language || navigator.userLanguage).toLowerCase(); //常规浏览器语言和IE浏览器
lang = lang.substr(0, 2); //截取lang前2位字符

/*---------使用语言包-----------*/
const i18n = new VueI18n({
  locale: lang, // 语言标识
  // this.$i18n.locale 通过切换locale的值来实现语言切换
  messages: {
    zh: Object.assign(require('./lang/zh_cn'), zhLocale), // 中文语言包
    en: Object.assign(require('./lang/en_us'), enLocale) // 英文语言包
  }
})

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

html代码使用{{$t('message.name')}}，js代码使用this.$t('message.name')