安裝

npm install vue-i18n

基本使用

我假設(shè)你的項(xiàng)目是基于vue-cli創(chuàng)建的。
main.js文件如下：

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    zh: {
        msg: '你好世界'
    },
    en: {
        msg: 'hello world'
    } 
  },
})
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

App.vue文件如下：

// App.vue
<template>
  <h4>{{ $t('msg') }}</h4>
</template>

以上就是vue-i18n的最簡(jiǎn)單使用，我們發(fā)現(xiàn)上面的例子存在一些問題，例如默認(rèn)是英文，沒有根據(jù)用戶的設(shè)置來動(dòng)態(tài)初始化，還有我們無法實(shí)現(xiàn)各種語言的切換，國(guó)際化的時(shí)候?qū)τ跀?shù)字時(shí)間日期是如何處理呢等等許多問題。

更多用法

針對(duì)上面的問題，我們可以做出相對(duì)應(yīng)的優(yōu)化。

• 根據(jù)用戶語言動(dòng)態(tài)初始化。

  let lang = (navigator.languages && navigator.languages[0]) || navigator.language
  lang = lang.split('-')[0]
  

• 利用下拉框或按鈕實(shí)現(xiàn)語言的切換。

   changeLang() {
     const lang = this.$i18n.locale
     this.$i18n.locale = lang==='zh'?'en':'zh'
   }
  

• 設(shè)置國(guó)際化時(shí)時(shí)間日期數(shù)字的處理方式。

   const numberFormats = {
     'zh': {
         currency: {
         style: 'currency',currency:'CNY'
         }
     },
     'en': {
         currency: {
         style: 'currency',currency:'USD',minimumFractionDigits:3
         }
     }
   }
  
   const dateTimeFormats = {
     'zh': {
         short: {
           year: 'numeric', month: '2-digit', day: '2-digit',
         }
     },
     'en': {
         short: {
           year: 'numeric', month: '2-digit', day: 'numeric',weekday:'long'
         }
     }
   }
  
   let lang = navigator.language || (navigator.languages&&navigator.languages[0])
   const i18n = new VueI18n({
     locale: lang.split('-')[0],
     messages: {
       zh,
       en 
     },
     numberFormats,
     dateTimeFormats
   })
  

• 語言文件單獨(dú)放在一個(gè)文件中，利于后期維護(hù)。
  效果截圖：

  
  
  中文

英文

我們可以看到表格中的時(shí)間日期與數(shù)字均按照我們?cè)O(shè)置的指定格式所展示。例如英文數(shù)字小數(shù)點(diǎn)后面最少三位，英文日期有帶星期，中文日期日子都是2位的等等。

總結(jié)

萬變不離其宗，我們發(fā)現(xiàn)國(guó)際化的步驟都是一樣的。

1. 安裝對(duì)應(yīng)的國(guó)際化包，如vue-i18n。
2. 準(zhǔn)備不同語言的語言文件（需要進(jìn)行國(guó)際化的文本）。
3. 在項(xiàng)目啟動(dòng)時(shí)根據(jù)用戶的語言自動(dòng)加載對(duì)應(yīng)語言文件，在需要國(guó)際化的地方按照對(duì)應(yīng)的語法進(jìn)行文本替換。

參考資料

vue-i18n
為了學(xué)習(xí)國(guó)際化，簡(jiǎn)單的寫了一個(gè)國(guó)際化demo，上面的例子都在demo 里面可以找到，有需要的可以自行下載，歡迎各位star。
另外還有一篇react國(guó)際化的文章，點(diǎn)這里