VUE+Element-UI+i18n 多语言化

项目需要，搭建玩了一下这次去实践 vue+element-ui 本地化的任务 ，本着分享的原则将过程记录下来 准备

在查阅了一些资料之后发现所谓本地化就是将相应的menu、tips、message做成变量，同时将这些变量对应的值记录在相应的文件中，由一个全局变量做控制开关，在合适的时候载入相应的文件以实现本地化。

vue本地化 相关资料比较多的就是集成vue-i18n，所以这里也是选用了vue-i18n

本地化记录key-value 的文件方式主要为.json 文件和.js文件，这里选用了js文件的方式 过程

vue-cli 搭建脚手架

引入 vue-i18n

在vscode 的集成终端窗口执行 npm install --save vue-i18n

保存key-value 的文件

项目结构

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 }

这里通过下拉框更改语言类型

App.vue

<el-select v-model="value" @change="switchLanguage(value)" class="el-select"><el-optionv-for="item in language":key="item.value":label="item.label":value="item.value"></el-option> 

</el-select>

使用

在定义变量的地方用这种方式写，一定要用$t()的方式

<div> {{ this.$t("localization.hello") }}</div>

element 的标签 默认属性 不能绑定变量

//会报错

<el-form-item label="this.$t('localization.eamilName')" class="vote-query-e**il"> </el-form-item>

需要在属性(lable)前加上 ：就可以绑定变量了

<el-form-item :label="this.$t('localization.eamilName')" class="vote-query-e**il"> </el-form-item> i18n多语言传参

const messages = {en: {message: {hello: '{msg} world'}} 

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

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

1、图片多语言配置

在各个多语言文件js中配置 logo :require('xxx/xxx/xx.png')

2、关于基于element-ui写的UI组件