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組件庫的國際化過程。