vue+ElementUI+vue-I18n 新手

环境：

• "vue": "^2.6.14",
• "element-ui": "^2.15.6",
• "vue-i18n": "^7.8.1",

新手，勿喷
反正是各种查，各种试，最后可以了

版本有一定关系， vue-i18n 在8.x和9.x的时候，都不行
错误为TypeError: undefined is not an object (evaluating 'plugin.install')；

以中英文为例

1. 安装 npm i --save [email protected]
2. 创建语言配置文件en.js, zh.js

// en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  'menu': {
    'home': 'Home',
    'about': 'About',
    'solution': 'Solution',
    'service': 'Service',
    'news': 'News',
    'contact': 'Contact Us'
  },
  ...enLocale
}
export default en

// zh.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
  'menu': {
    'home': '公司首页',
    'about': '关于',
    'solution': '产品和解决方案',
    'service': '服务',
    'news': '新闻',
    'contact': '联系我们'
  },
  ...zhLocale
}
export default zh

3. 创建i18n的配置文件

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementLocal from 'element-ui/lib/locale'
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

const messages = {
  en,
  zh
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'zh', // set locale
  messages // set locale messages
})
// 这个设置是关键的，其他教程有各种写法，但是这个版本下，这个可以
ElementLocal.i18n((key, value) => i18n.t(key, value))

export default i18n

4. main.js 中添加i18n

import i18n from './languages/i18n'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: ''
})