Vue中vue-i18n結合vant-ui實現國際化

　　（一）添加依賴模塊

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

// package.json

{
   "dependencies": {
       "vant": "^2.1.6"
   }
}

　　（二）配置語言資源文件

　　1、目錄結構如下：

　　本測試工程的代碼目錄是這樣的：在src文件夾中創建一個lang文件夾，在lang文件夾中分別創建index.js文件、zh_cn.js文件和en_us.js文件。

　　2、zh_cn.js和en_us.js資源文件示例

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


// en_us.js文件
export default {
    app: {
        hello: 'Hello，World!'
    }
}

　　3、index.js文件內容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {Locale} from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enLocale from './en_us'
import zhLocale from './zh_cn'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enUS,
    ...enLocale
  },
  zh: {
    ...zhCN,
    ...zhLocale
  }
}

const i18n = new VueI18n({
  locale: 'zh',  // 設置默認語言
  messages: messages // 設置資源文件對象
})

// 更新vant組件庫本身的語言變化，支持國際化
function vantLocales (lang) {
  if (lang === 'en') {
    Locale.use(lang, enUS)
  } else if (lang === 'zh') {
    Locale.use(lang, zhCN)
  }
}

export {i18n, vantLocales}

　　（三）應用國際化流程

　　在main.js文件中進行引用，如：

// 導入資源文件
import {i18n, vantLocales} from './lang'


console.log('當前的語言是：', i18n.locale)
// vant-ui組件國際化
vantLocales(i18n.locale)

　　（四）資源文件的具體使用方式

　　1、在Vue文件的template標簽中使用方式

<template>
  <div>
    <van-nav-bar :title="this.$t('app.hello')" @click-left="show=true">
      <van-icon name="search" slot="left" />
    </van-nav-bar>
</template>

　　或者

<template>
  <div>
    <van-nav-bar :title="$t('app.hello')" @click-left="show=true">
      <van-icon name="search" slot="left" />
    </van-nav-bar>
</template>

　　效果如下：

 、  

　　2、在Vue文件的script標簽中使用方式

created () {
    console.log('start to enter created ', this.$t('app.hello'))
}

　　效果如下：

 、 

　　3、在JS文件中使用方式

　　在main.js文件使用示例，如下：

console.log('main.js文件溫馨提示：', i18n.messages[i18n.locale].app.hello)

　　效果如下：

  、

　　（五）vant-ui組件庫國際化過程

　　界面上自身的語言詞條，可以通過i18n來實現，若是vant-ui自身組件庫呢？又該如何國際化？其實，也很簡單，只要語言發生了變化，調用一個lang/index.js文件中的vantLocales()函數即可，例如下面兩種示例：

　　1、zh語言及其效果

　　vantLocales('zh')

　　

　　2、en語言及其效果

　　vantLocales('en')

　　

　　其中，被紅色框圈住的就是vant-ui組件庫自身的語言，目前已實現了其國際化流程。