1.安装vue-i18n
2.main.js中引入 import i18n from './i18n/i18n'
3.挂载到vue实例下
4.项目文件夹下如下配置
zh-CN.js文件:
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
import store from '../../store'
const cn = {
message: {
'placeholderAddress': '请选择住址',
'demoShow': store.getters.config.projectName,
'name': '姓名',
'school': '学校',
'adress': '住址',
'placeholderDate': '请选择日期',
'placeholderTime': '请选择时间',
'profile': '个人简介',
'text': '好好学习,天天向上'
},
...zhLocale
}
export default cn
en.js文件:
import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
const en = {
message: {
'placeholderAddress': 'Please Choose Adress',
'demoShow': 'demoShow',
'name': 'name',
'school': 'school',
'adress': 'adress',
'placeholderDate': 'Please Choose Date',
'placeholderTime': 'Please Choose Time',
'profile': 'profile',
'text': 'Good good study, Day day up'
},
...enLocale
}
export default en
index.js文件
import en from './en'
import cn from './zh-CN'
export default {
en: en,
cn: cn
}
i18n.js文件:
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
// 从localStorage获取语言选择。
const i18n = new VueI18n({
locale: localStorage.lang || 'en', // 初始未选择默认 cn 中文
messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
export default i18n
需要切换的文字$t('message.school'),直接获取key映射value