elementUI结合vue-i18n实现国际化

目录结构：

// 安装vue-i18n

npm install vue-i18n --save

cn.js

// cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // element组件自带文本
const cn = {
  message: { // 页面上我们的文本
    'hello': '你好，世界'
  },
  ...zhLocale
}

export default cn

en.js

// en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  message: {
    'hello': 'hello, world'
  },
  ...enLocale
}

export default en

index.js

// index.js
import en from './en'
import cn from './cn'
export default {
  en,
  cn
}

// i18n.js

// i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs/index'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'en', // 默认语言，考虑刷新操作，存入localStorage
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 重点：为了实现element插件的多语言切换

export default i18n

// main.js

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import '../theme/index.css'
import ElementUI from 'element-ui'
import i18n from './i18n/i18n' // ①

Vue.use(i18n) // ②
Vue.use(ElementUI)

Vue.config.productionTip = false

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

// 组件

 // 使用方法
<p>{{ $t('message.hello') }}</p>

// 切换语言
this.$i18n.locale = this.$i18n.locale === 'cn' ? 'en' : 'cn'
localStorage.setItem('lang', this.$i18n.locale) // 考虑刷新操作，存入localStorage

参考：https://segmentfault.com/a/1190000012779120