【開發筆記】i18n 與 Vue2 和 Vue3 配置的不同方法

i18n 是國際化（Internationalization）取字母頭 I 和尾 N ，加上中間 18 個字母的縮寫表示法。對於採用 Vue 框架開發的朋友，應該多少皆熟悉 vue-i18n 這個模組。不過因應 Vue2 和 Vue3 的沿革，其實 vue-i18n 支援 Vue2 的版本最後是停留在版號 8，而目前版號 9 的 vue-i18n 則是針對 Vue3 支援的版本。

i18n-Vue 在 Vue2 情況下的配置

首先確認 i18n-Vue 的版本是否支援 Vue2（截至目前支援 Vue2 最新的版本是 8.28.2）。另外就是創建 i18n 的實例，是透過 new VueI18n({}) 來完成的。最後因為 VueI18n 在 Vue2 是屬於插件（Plugin），所以要使用 VueUse 來讓實例全局化。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import en from './locales/en.json'
import zhTW from './locales/zh-Hant-TW.json'

const messages = {
    en: en,
    "zh-Hant-TW": zhTW
}

export default new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE,
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
    messages: messages
})

i18n-Vue 在 Vue3 情況下的配置

同樣先確認 i18n-Vue 的版本是否支援 Vue3（截至目前支援 Vue3 最新的版本是 9.9.1）。另外就是創建 i18n 的實例，是透過 createI18n({}) 來完成的。至於實例全局化則是透過變量 globalInjection 以及配和 app.use(i18n) 來實現。

import { createI18n } from "vue-i18n";
import en from './locales/en.json'
import zhTW from './locales/zh-Hant-TW.json'

const messages = {
    en: en,
    "zh-Hant-TW": zhTW
}

export default createI18n({
    globalInjection: true,
    allowComposition: false,
    locale: import.meta.env.VITE_DEFAULT_LOCALE,
    fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
    availableLocales: ["en", "zh-Hant-TW"],
    legacy: true,
    messages: messages
})