环境：
- "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')；
以中英文为例
- 安装
npm i --save vue-i18n@7.x - 创建语言配置文件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
- 创建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
- main.js 中添加i18n
import i18n from './languages/i18n'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
