VUE+Element-UI 多语言化

写在前面

应项目需要同时感谢项目组前辈给我这次机会去实践 vue+element-ui 本地化的任务，因本人技术水平较低，可能在一些方面实现的比较笨拙，本着分享的原则将过程记录下来

VUE及Element-UI信息

网站快速成型工具
Element-UI

渐进式JavaScript 框架
Vue.js

准备

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

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

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

过程

关于vue-cli 脚手架的搭建这里不做赘述，直接介绍项目实现本地化的过程

引入 vue-i18n

在vscode 的集成终端窗口执行
npm install --save vue-i18n
在main.js中引用
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 }); ... function InitLanguage() { return Vue.cookie.get('PCDefaultLanguage') == 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: '<App/>' })
保存key-value 的文件
- 项目结构
- en.js
  module.exports = { localization: { selectlanguage: "Language", type: "English", hello: 'Hello', login: 'Login', welcome: "Welcome" } }
- zh-CN.js
  module.exports = { localization: { selectlanguage: "选择语言", type: "中文简体", hello: '你好', login: '登录', welcome: "欢迎" } }
- zh-TW.js
  module.exports = { localization: { selectlanguage: "選擇語言", type: "中文繁體", hello: '你好', login: '登錄', welcome: "歡迎" } }
这里通过下拉框更改语言类型

App.vue
<el-select v-model="value" @change="switchLanguage(value)" class="el-select"> <el-option v-for="item in language" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
App.vue
<script> export default { data() { return { value: this.$i18n.locale, //为了把下拉框的默认值和全局变量的值一致，以此实现载入页面时显示的语言和数据配置一致 language: [ { value: "en-US", label: "English" }, { value: "zh-CN", label: "中文简体" }, { value: "zh-TW", label: "中文繁體" } ] }; }, methods: { switchLanguage(value) { if (this.value == "zh-CN") { this.$i18n.locale = "zh-CN"; } else if (this.value == "en-US") { this.$i18n.locale = "en-US"; } else if (this.value == "zh-TW") { this.$i18n.locale = "zh-TW"; } var _this = this; //在选择了显示的语言后，将配置保存到Cookie中 this.$cookie.set( "DefaultLanguage", (_this.value), // { // expires: "30m" //默认cookie有效时间为30分钟 } ); } } </script>

使用
在定义变量的地方用这种方式写，一定要用$t()的方式
<div> {{ this.$t("localization.hello") }}</div>
在这因为没有掌握Vue,遇到个小问题就是element 的标签默认属性不能绑定变量

<el-form-item label="this.$t('localization.eamilName')" class="vote-query-email"> </el-form-item>
需要在属性(lable)前加上：就可以绑定变量了
<el-form-item :label="this.$t('localization.eamilName')" class="vote-query-email"> </el-form-item>

END