Vue、elmentUI国际化 vue-i18n项目实行简繁体切换

时间:2024-05-22 22:11:09

1、安装国际化插件vue-i18n

npm install vue-i18n --save

2、增加国际化翻译文件

在项目的src下添加lang文件夹增加中文简体翻译文件(zh-cn.js)以及繁体翻译文件(zh-mo.js),里面分别存储项目中需要翻译的内容。增加index.js实现按需加载里定制 i18n。

Vue、elmentUI国际化 vue-i18n项目实行简繁体切换
Vue、elmentUI国际化 vue-i18n项目实行简繁体切换
Vue、elmentUI国际化 vue-i18n项目实行简繁体切换
index.js:

import Vue from ‘vue’
import VueI18n from ‘vue-i18n’
import cnlocale from ‘./zh-cn’
import molocale from ‘./zh-mo’
import zhLocale from ‘element-ui/lib/locale/lang/zh-CN’
import twLocale from ‘element-ui/lib/locale/lang/zh-TW’

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: sessionStorage.getItem(“lang1”) || ‘cn’,
messages: {
cn: {
…cnlocale,
…zhLocale
},
mo: {
…molocale,
…twLocale
}
}
})

export default i18n

3、项目引入

在项目的main.js中引入vue-i18n插件,引入对应的翻译文件(zh-cn.js/zh-mo.js)引入并结合Element-UI 国际化。
import i18n from ‘./lang/index’ //国际化
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
});
new Vue({
i18n,
router,
//components: { App },
//template: ‘’
render: h => h(App)
}).$mount("#app");

4、项目使用

在要切换的地方进行切换。
如果是element-ui 的,在要翻译的前面加上冒号
比如:label=“账号” 就改成 :label=”$t(‘loginP.user’)”

如果是html 显示的,就改用以下写法:
直接写成 {{$t(‘loginP.user’)}},就会直接去往语言脚本里面自动匹配。