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

// package.json

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

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

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

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

// JS文件

import {i18n} from '@/lang' 


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

import { i18n } from '@/lang'

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