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

​