1 首先大家安装 vue-i18n
npm install vue-i18n --save
2 在 main 文件中
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
3 现在可以再src目录下创建一个lang文件夹
目录结构
├─src
├─lang
├─en.js 英文包
├─zh.js 中文包
└─kor.js 韩文包
以zh.js文件举例 其内容如下，其余的像en.js、 kor.js一样 只不过后面的值是其他语言
'use strict';
exports.__esModule = true;
exports.default = {
el: {
colorpicker: {
confirm: '确定',
clear: '清空'
},
datepicker: {
now: '此刻',
today: '今天',
cancel: '取消',
clear: '清空',
confirm: '确定',
selectDate: '选择日期',
selectTime: '选择时间',
startDate: '开始日期',
startTime: '开始时间',
endDate: '结束日期',
endTime: '结束时间',
prevYear: '前一年',
nextYear: '后一年',
prevMonth: '上个月',
nextMonth: '下个月',
year: '年',
month1: '1 月',
month2: '2 月',
month3: '3 月',
month4: '4 月',
month5: '5 月',
month6: '6 月',
month7: '7 月',
month8: '8 月',
month9: '9 月',
month10: '10 月',
month11: '11 月',
month12: '12 月',
// week: '周次',
weeks: {
sun: '日',
mon: '一',
tue: '二',
wed: '三',
thu: '四',
fri: '五',
sat: '六'
},
months: {
jan: '一月',
feb: '二月',
mar: '三月',
apr: '四月',
may: '五月',
jun: '六月',
jul: '七月',
aug: '八月',
sep: '九月',
oct: '十月',
nov: '十一月',
dec: '十二月'
}
},
select: {
loading: '加载中',
noMatch: '无匹配数据',
noData: '无数据',
placeholder: '请选择'
},
cascader: {
noMatch: '无匹配数据',
loading: '加载中',
placeholder: '请选择',
noData: '暂无数据'
},
pagination: {
goto: '前往',
pagesize: '条/页',
total: '共 {total} 条',
pageClassifier: '页'
},
messagebox: {
title: '提示',
confirm: '确定',
cancel: '取消',
error: '输入的数据不合法!'
},
upload: {
deleteTip: '按 delete 键可删除',
delete: '删除',
preview: '查看图片',
continue: '继续上传'
},
table: {
emptyText: '暂无数据',
confirmFilter: '筛选',
resetFilter: '重置',
clearFilter: '全部',
sumText: '合计'
},
tree: {
emptyText: '暂无数据'
},
transfer: {
noMatch: '无匹配数据',
noData: '无数据',
titles: ['列表 1', '列表 2'],
filterPlaceholder: '请输入搜索内容',
noCheckedFormat: '共 {total} 项',
hasCheckedFormat: '已选 {checked}/{total} 项'
},
image: {
error: '加载失败'
},
pageHeader: {
title: '返回'
}
},
//测试模块
m: {
appCode: '软件',
roleNameLike: '角色',
roleCodeLike: '角码',
seach: '查',
reset: '重置',
total: '共',
page: '条',
menuRole: '菜单角色',
name: '名称',
code: '编码',
createdUser: '创建人',
createTime: '创建时间',
roleSource: '来源',
remark: '备注'
}
};
举例：
如果我想以上述zh.js 中最后的 remark：‘备注’ 作为变量的话 我可以这么写 this.$t("m.remark")
4 语言包写好了之后 我们再回到 main.js 文件
我们发现 main文件中 引入了这个js，作用是按需注册全局element组件，我们进入这个 '@/libs/element'文件
import '@/libs/element'
我们需要对这个文件 进行简单的修改，因为它将element-ui的语言包写死了
这些注释的地方全部去掉
// // 循环注册全局组件
// components.forEach(item => {
// Vue.use(item)
// })
// locale.use({
// el: {
// ...enLocale.el,这一行是它写死的部分 看了一下他这个文件的use源码，只能写入一个lang默认汉语
// pagination: {
// goto: '',
// pagesize: '',
// total: '共 {total} 条',
// pageClassifier: ''
// }
// }
// })
同时我们要在 最后一行 ，将这些组件全部暴露出来
export default components
当我们回到 main文件就可以这么引用了
import comps from '@/libs/element'
然后再引入 这个其实是为了实现 element-ui组件的语言切换
import locale from 'element-ui/lib/locale';
然后重点 我们快实例化i18n 也就是要快使用了
引入我们之前准备好的语言包
import enLocale from './lang/en'
import zhLocale from './lang/zh'
import koLang from './lang/kor'
//然后创建，message 然后将语言包和语言名关联起来 结构如下
const messages = {
en: {
...enLocale
},
zh: {
...zhLocale
},
ko: {
...koLang
}
}
//我们new 一个 i18n 实例 默认语言 zh 中文 将message方法挂载到实例上
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'zh', // set locale
messages, // set locale messages
})
//还记得上面引入的comps吗。我们现在开始要注册全局element组件了
comps.forEach(item => {
Vue.use(item)
})
//这一步是为了实现element组件的多语言切换 想了解更多可以看element-ui/lib/locale 文件里面的源码
locale.i18n((key, value) => i18n.t(key, value))
//最终一步是为了将i18n 挂载到vue 实例上
new Vue({
router,
store,
render: h => h(App),
i18n
}).$mount('#app')
完成！
5 关于使用
其实前面已经提过了，
我们可以先在 lang文件夹 里面的语言文件写入对应的翻译，
然后变量用 this.$t("m.menuRole") 这样的写法代替
那我们如何切换语言？其实也很简单 如下
<el-select class="position" @change="handleChange" v-model="lang">
<el-option :label="'中文简体'" :value="'zh'"></el-option>
<el-option :label="'English'" :value="'en'"></el-option>
<el-option :label="'한국어'" :value="'ko'"></el-option>
</el-select>
data() {
return {
lang: 'zh'
}
},
methods: {
handleChange() {
this.$i18n.locale = this.lang
}
}
