一 多语言原生的实现逻辑
1.给定两个按钮,点击实现切换语言 ,
详细需求:1 点击中文按钮,页面展示内容亲,欢迎回来, 需求2 :点击英文按钮,页面显示
要素1 当前语言设定, locale,zh代表中文,en代表英文
要素2 字典文字材料,message
要素3 翻译函数
以下代码:
以下js部分
data(){
return{
locale: 'zh'
message: {
zh:{ sayHi:'亲,欢迎回来' },
en: { sayHi:'Dear,welcome back' }
}
methods: {
t(str){
const dict = this.messages[this.locale] //根据语言设定拿出字典
const res = dict[str] //在字典中找到对应翻译并返回
return res
}
}
二: i18n
1.安装npm i vue-i18n
2.在
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
3.const i18n = new VueI18n({ //创建实例
locale:'zh'
messages:{
zh:{
goodday:'祝你开心每一天',
student:{
id:'学号'
}
},
en:{
goodday:'have a good day'
}
}
})
4.挂载
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
5.使用
早安，管理员，{{ $t('goodday') }}！{{$t('student.id')}}
早安，管理员，{{ $t('goodday') }}！
三: 饿了么UI 的恢复默认中文显示
注意,i18n后,如果之前用引饿了么UI 组件,我们发现:饿了么的确定按钮,以及日历都变成了英文显示
解决方法: 查看饿了么文档,国际化-> 兼容下包 [email protected]
在引入i18n 的下面 引入
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
import elementEN from 'element-ui/lib/locale/lang/en'
2.在字典中,将饿了么的字典与我们自己的字典合并
const i18n = new VueI18n({ //创建实例
locale:'zh'
messages:{
zh:{
goodday:'祝你开心每一天',
student:{
id:'学号'
},
...elementZH //合并字典
},
en:{
goodday:'have a good day' ,
...elementEN //合并字典
}
}
})
3.将Vue.use(ElementUI)替换为
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
四:考虑到main.js 内容太多,将i18n拆分出来
// 引入库
// 四步操作做完以后, 国际化插件会在 this 里面放入两个数据
// $i18n 国际化插件实例
// $t 翻译函数
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
import elementEN from 'element-ui/lib/locale/lang/en'
import menuZH from './zh'
import menuEN from './en'
// vue插件安装
Vue.use(VueI18n)
// 创建实例
export default new VueI18n({
locale: localStorage.getItem('lang') || 'zh',
messages: {
zh: {
goodday: '祝你开心每一天',
switchSuccess: '切换语言成功',
...elementZH,
...menuZH
},
en: {
goodday: 'have a good day',
switchSuccess: 'Success !!!',
...elementEN,
...menuEN
}
}
})
import i18n from '@/i18n/index.js'
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
以上,即实现了i18n多语言的引入