安装:npm install vue-i18n
版本:“vue-i18n”: “^8.24.2”,
超过9.xxx的版本就会报错Object()…
先看目录:i18n下面的整体
二.各个文件的内容和用法
main.js
import i18n from './i18n/i18n';
new Vue({
el: '#app',
i18n, //引用
components: { App },
template: '<App/>'
})
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.getItem(“language”) || 'cn',
messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
export default i18n;
index.js
import en from './en';
import cn from './cn';
export default {
en: en,
cn: cn
}
cn.js:中文显示内容
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
message: {
'hello': '你好,世界',
},
...zhLocale
}
export default cn;
en.js:英文翻译内容
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
message: {
'hello': 'hello, world',
},
...enLocale
}
export default en;
使用点击事件 切换当前项目的语言:
//切换成英语
changeEng(){
this.$i18n.locale = 'en';
localStorage.setItem(“language”,”en”)
}
在组件内使用:
<p>{{$t('message.hello')}}</p>
console.log(this.$i18n.t('message.hello'), this.$i18n.t('message.user'))
出现的问题bug:表格的页码的地方出现错误,
需要在最开始初始化一下
(放在index.vue初始化一次即可)
this.$i18n.locale = localStorage.getItem("langular")||"cn";