写在前面
项目需要,搭建玩了一下这次去实践 vue+element-ui 本地化的任务 ,本着分享的原则将过程记录下来
在查阅了一些资料之后发现所谓本地化就是将相应的menu、tips、message做成变量,
同时将这些变量对应的值记录在相应的文件中
,由一个全局变量做控制开关,在合适的时候载入相应的文件以实现本地化。
vue本地化 相关资料比较多的就是集成vue-i18n
,所以这里也是选用了vue-i18n
本地化记录key-value
的文件方式主要为.json 文件和.js文件,这里选用了js文件的方式
在vscode 的集成终端窗口执行
npm install --save vue-i18n
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import twLocale from 'element-ui/lib/locale/lang/zh-TW'
...
Vue.use(VueI18n)
Vue.use(ElementUI, { zhLocale });
...
// InitLanguage 这里引入了vue-cookie,是为了将用户选择的语言存储到Cookie里,在以后访问站点不需要重新选择语言
function InitLanguage() {
return Vue.cookie.get('DefaultLanguage') == null ? 'zh-CN' : Vue.cookie.get('DefaultLanguage');
}
const i18n = new VueI18n({
locale: InitLanguage(), // 语言标识,默认汉语,先去cookie查找,如果存在并有效,cookie值即为默认语言类型;否则默认为中文简体
messages: {
'en-US': Object.assign(require("../static/lang/en"),enLocale),
'zh-CN': Object.assign(require("../static/lang/zh-CN"),zhLocale),
'zh-TW': Object.assign(require("../static/lang/zh-TW"),twLocale)
}
});
locale.i18n((key, value) => i18n.t(key, value));//为了之后将element-ui组件本地化
...
new Vue({
el: '#app',
router,
i18n,//将VueI18n挂载到vue实例上
store: store,
components: { App },
template: ' '
})
项目结构
en.js
import enLocale from 'element-ui/lib/locale/lang/en'
module.exports = {
localization: {
selectlanguage: "Language",
type: "English",
hello: 'Hello',
login: 'Login',
welcome: "Welcome",
logo:require('xxx/xxx.png'),//图片多语言配置
},
...enLocale
}
zh-CN.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //element-ui自身翻译
module.exports = {
localization: {
selectlanguage: "选择语言",
type: "中文简体",
hello: '你好',
login: '登录',
welcome: "欢迎"
},
...zhLocale
}
zh-TW.js
module.exports = {
localization: {
selectlanguage: "選擇語言",
type: "中文繁體",
hello: '你好',
login: '登錄',
welcome: "歡迎"
}
}
这里通过下拉框更改语言类型
App.vue
App.vue
使用
在定义变量的地方用这种方式写,一定要用$t()的方式
{ { this.$t("localization.hello") }}
element 的标签 默认属性 不能绑定变量
//会报错
需要在属性(lable)前加上 :就可以绑定变量了
const messages = { en: { message: { hello: '{msg} world' } } }
{ { $t('message.hello', { msg: 'hello' }) }}
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) export function InitLanguage() { return localStorage.getItem('gdLang') || 'zh_cn' } const i18n = new VueI18n({ locale: InitLanguage(), messages }) locale.i18n((key, value) => i18n.t(key, value)) export default i18n
先导入上面文件 $t改为 i18n.t
import i18n from "@/i18n" i18n.t('xxx.xxx')
1、图片多语言配置
在各个多语言文件js中配置 logo :require('xxx/xxx/xx.png')
2、关于基于element-ui写的UI组件
在main.js全局注册,然后各个组件的翻译就会解决,element-ui自带翻译会自动翻译