[笔记] 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


按赞加入粉丝团

延伸阅读