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

• 在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

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  

<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>

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>

i18n多语言传参

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

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

普通JS文件引入i18n多语言方式

      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自带翻译会自动翻译

END