[筆記] Vue3 / Vue-cli4 與 Vuex, TypeScript 和 Vue-i18N 的實作

Vue-i18N 算是採用 Vue 為前端框架者,常會使用的多國語言翻譯套件。雖說在 [指南] 整合 Vue-i18N 國際化 和 TypeScript 到現有的 Vue 2.X 專案 已經有提過關鍵點了,但場景一換到 Vue3 搭配 Composition API 一起使用時,那又會是一道難題了。這邊筆記下由 Vue2 升級到 Vue3 的方式。
vue typescript


關鍵點

1. 以一支 entry.ts 當作所有 i18N 項目的進入點,並引入 import { createI18n } from ‘vue-i18n’ 和調整 Instance 相關設定
2. main.ts 中,用 import VueI18n from ‘./i18n/entry’ 和 app.use(VueI18n) 來讓全域的 Vue Instance 都可以讀到設定。
3. 用 vue-i18n 內建的 useI18n() 方法,去修改設定中的 locale,就
可以藉由改變預設語言,來達成翻譯的效果了。

相關程式碼


參考資料

1. [ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化 多國語言功能
2. Vue 3 composition API and access to Vue instance

按讚加入粉絲團

延伸閱讀