Vue+Element-UI 多语言化

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 });
   ...
   // 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: '<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 (value == "zh-CN") {
            this.$i18n.locale = "zh-CN";
        } else if (value == "en-US") {
            this.$i18n.locale = "en-US";
        } else if (value == "zh-TW") {
            this.$i18n.locale = "zh-TW";
        }
        //在选择了显示的语言后，将配置保存到Cookie中
        this.$cookie.set(                     
            "DefaultLanguage",                
            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

​