[指南] Vue3 搭配 vue-i18N 的全域注入設定 @地瓜大的飛翔旅程

章節連結

可能出現的錯誤
設定步驟
參考來源

使用 Vue 3 開發並整合 Vue-18n 的過程中，若你是習慣使用 Vue2 的 $t 寫法的，那有很大的機率會在載入時出現錯誤。理由是 Vue-i18n 和 Vue 3 的搭配預設是不會如同 Vue2 般全域注入的，就像Vue3 沒有 this.$vm 可以直接取得 Vue 的 Instance 一般。這篇筆記下其設定值，讓你既可以保留 Vue2 的 $t 寫法，也可以使用 Composition API 所帶來的好處。

可能出現的錯誤

當你預設沒有載入支援 $t 的寫法時，很有機會出現 __VUE__i18n__ 無法載入的錯誤訊息

設定步驟

1. 在 createI18n 的 Instance 建立時，需要額外加上以下設定：

const i18n = createI18n({
    globalInjection: true, // 全域注入，讓你在 <template> 可以使用 $t
    legacy: false, // 讓你可以在 composition API 中使用
    messages,
    locale: 'zh-tw'
    fallbackLocale: 'en-us'
})