基於Vue、vue-i18n實現國際化（多語言）

vue-i18n官網 https://kazupon.github.io/vue...

項目用vue-cli構建，用到vue全家桶及webpack、iview。

一、在main.js中引入vue-i18n.

import VueI18n from 'vue-i18n'
vue調用第三方插件
Vue.use(VueI18n)

二、新建一個vue-i18n對象

const i18n = new VueI18n({
  // 默認語言
  locale: LangCongig.DEFAULT_LANG,
  messages: LangCongig.LOCALES
})

三、配置語言選項

LangCongig是一個配置語言包文件和語言選項的js文件，文件內容大體以下：
// LangCongig.js
import IviewLangs from './iviewLangs'

// 語言包列表, 合併語言包
const locales = {
  'cn': Object.assign(require('../lang/cn'), IviewLangs.zh_CN),
  'en': Object.assign(require('../lang/en'), IviewLangs.en_US)
}
export default {
  DEFAULT_LANG: setup(),
  LOCALES: locales
}
setup是一個函數，判斷當前設置的語言類型，若是沒有設置語言，則根據navigator判斷是中文仍是非中文，非中文則顯示英語。
IviewLangs是iview的語言包配置，即咱們定義的語言與iview顯示的要一致，好比時間選擇器的顯示。
// IviewLangs.js
import zhCN from 'iview/dist/locale/zh-CN' // 簡體中文
import enUS from 'iview/dist/locale/en-US' // 英文

export default {
  zh_CN: zhCN,
  en_US: enUS
}
require('../lang/cn')這個是咱們自定義的中文語言包，格式以下：
// cn.js
module.exports = {
  language: '語 言',
  chinese: '中文'
}
// en.js
module.exports = {
  language: 'language',
  chinese: 'Chinese'
}

四、添加到new Vue選項裏

let vm = new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

五、如何調用

在頁面調用：<span>{{$t('language')}}</span>
在js中調用：this.$t('language')

六、切換語言

1）把語言保存起來，以便退出或刷新時加載後仍是當前選擇的語言，通常存在cookie裏
2）this.$i18n.locale = 'en' 重置語言類型