Vue中vue-i18n结合element-ui实现国际化

　　（一）添加依赖模块

　　在package.json文件中添加vant模块的依赖，如：

// package.json

{
   "dependencies": {
       "element-ui": "^2.12.0"
   }
}

　　（二）配置语言资源文件

• 目录结构

• index.js文件内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from './en_us'
import zhLocale from './zh_cn'

Vue.use(VueI18n)

const localMessages = {
  en: {
  ...enLocale,
  ...elementEnLocale   // 将enLocale和elementEnLocale两个JSON格式的内容合并成一个JSON格式的内容
  },
  zh: {
  ...zhLocale,
  ...elementZhLocale  // 将zhLocal和elementZhLocale两个JSON格式的内容合并成一个JSON格式的内容
  }
}
const i18n = new VueI18n({
  locale: 'zh', // 提供默认语言
  messages: localMessages
})

export {i18n}

• en_us.js和zh_cn.js文件内容示例

// en_us.js
export default {
  app: {
      hello: 'Hello World!',
  }
}

// zh_cn.js
export default {
  app: {
      hello: '你好，世界！',
  }
}

　　（三）初始化国际化

// main.js文件
import Vue from 'vue'
import ElementUI from 'element-ui'
import {i18n} from './lang'  // 路径要视代码目录结构，看lang文件夹和main.js文件的层次

Vue.use(i18n)

// 调用国际化初始函数
initLocalLang()

function initLocalLang () {
  // element-ui组件国际化
  Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
  })
}

　　（四）使用国际化

• 在Vue文件中的使用

　　（1）template标签中的使用

<template>
   <!-- 可以用this.$t，也可以直接使用$t-->
   <el-butto>{{$t('app.hello')}}</el-butto>
  <el-butto v-text="$t('app.hello')"></el-butto>
</template>

　　（2）script标签中的使用

<script>
   data() {
       return {
             helloTip: this.$t('app.hello')
       }
}
</script>

• 在JS文件中的使用

// JS文件

import {i18n} from '@/lang' 

let helloTip = i18n.messages[i18n.locale].app.hello

　　（五）element-ui组件库国际化

　　以上的国际化处理是支持网页中自身开发的多语言，那要是更改element-ui组件库的国际化，又如何处理呢？其实也很简单，在原有的基础上动态更改locale值即可，可以参考如下示例：

import { i18n } from '@/lang'

function changeLang(currentLang) {
    if ('zh' === currentLang) {
        i18n.locale = 'en'
    } else {
        i18n.locale = 'zh'
    }
}

　　上述代码，可以动态切换element-ui组件库的国际化过程。