【开发笔记】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
})