Vue-i18n：前端國際化

一、Vue-i18n是什麼？

Vue-i18n 是 Vue.js 的官方國際化插件。它可以作為一個獨立的插件使用，也可以集成到 Vue.js 核心中（從 Vue.js 2.6 開始，它已經默認集成到了核心中）。Vue-i18n 可以非常方便地實現前端的國際化和多語言支持。

在使用 Vue-i18n 時，需要定義語言環境、翻譯詞條等，然後在 Vue 組件中使用翻譯的方式來展示文本內容。

二、Vue-i18n 如何使用？

Vue-i18n 可以非常方便地實現前端的國際化和多語言支持。為了方便理解，這裡先列出 Vue-i18n 常用的 API 和配置項：

// API
$t: 翻譯方法
$tc: 包含複數支持的翻譯方法
$te: 檢驗當前語言環境是否存在該翻譯詞條
$n: 數量翻譯方法

// 配置項
locale: 語言環境
fallbackLocale: 降級語言環境
messages: 各語言環境下的翻譯詞條

在 Vue 項目中，首先需要在 main.js 中創建 Vue-i18n 實例，創建的時候可以通過配置項指定語言環境、降級語言環境、翻譯詞條等內容：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json' // 英文翻譯詞條
import zh from './locales/zh.json' // 中文翻譯詞條

Vue.use(VueI18n)

const messages = {
  en,
  zh
}

const i18n = new VueI18n({
  locale: 'zh', // 語言環境
  fallbackLocale: 'en', // 降級語言環境
  messages
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

定義好 Vue-i18n 實例後，就可以在 Vue 組件中使用 $t 方法進行文本翻譯了。

例如，在 Vue 組件的 template 中通過 {{ $t(‘message.hello’) }} 可以顯示 hello 詞條對應的文本，該詞條可以在翻譯詞條對象（en.json 或 zh.json）中進行定義。

三、Vue-i18n 如何進行複數處理？

在一些語言中，名詞的單複數形式有很大的差別，需要在翻譯時進行複數處理。

Vue-i18n 提供了 $tc 方法用於支持複數翻譯。$tc 方法需要傳入三個參數：翻譯詞條的 key、數量、可選的複數形式。根據數量的不同，Vue-i18n 會自動選擇正確的複數形式進行翻譯。

// en.json
{
  "notifications": {
    "message": "You have {count} {item} in your cart",
    "message_plural": "You have {count} {item}s in your cart"
  }
}

// 在組件中使用

  {{ $t('notifications.message', { count: cartItems }, { plural: cartItems }) }}

四、Vue-i18n 怎樣檢測翻譯詞條是否存在？

Vue-i18n 提供了 $te 方法用於檢驗當前語言環境是否存在指定的翻譯詞條。當翻譯詞條存在時，$te 方法會返回 true，否則返回 false。

if (this.$i18n.te('message.hello')) {
  // message.hello 存在！
} else {
  // message.hello 不存在！
}

五、Vue-i18n 如何進行數字和日期格式化？

Vue-i18n 支持數字和日期格式化功能。在翻譯詞條中可以通過 {n} 和 {time} 來表示需要進行格式化處理的數字和日期。

// en.json
{
  "unread": "{n, plural, =0 {You have no unread emails} =1 {You have 1 unread email} other {You have {n} unread emails}}",
  "time": "Today is {time, date, short}"
}

// 在組件中使用
{{ $t('unread', { n: count }) }}
{{ $t('time', { time: new Date() }) }}

六、小結

Vue-i18n 是 Vue.js 的官方國際化插件，可以非常方便地實現前端的國際化和多語言支持。通過創建 Vue-i18n 實例並定義語言環境、翻譯詞條等內容，即可在 Vue 組件中使用 $t 進行文本翻譯，$tc 進行複數翻譯，$te 進行翻譯詞條檢驗。Vue-i18n 還支持數字和日期的格式化功能，可以方便地在翻譯詞條中進行處理。