vue3 ts i18n 完整示例

Vue3 中使用 TypeScript 和 I18N (国际化) 的完整示例通常包括以下几个步骤：

1. 安装依赖：

npm install vue-i18n typescript vue-class-component @vue/cli-plugin-typescript --save

2. 配置 `tsconfig.json`，添加对 Vue 类型的支持：

{
  "compilerOptions": {
    ...
    "types": ["@vue/runtime-dom", "vue-i18n"],
    "allowJs": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  },
  ...
}

3. 创建并配置 VueI18n 实例：

import { createApp } from 'vue'
import { defineMessages, useI18n } from 'vue-i18n'

// 创建语言资源
const messages = defineMessages({
  hello: { en: 'Hello', zh-CN: '你好' },
})

// 初始化 i18n
const i18n = new VueI18n({
  locale: process.env.VUE_I18N_LOCALE || 'en', // 设置默认语言
  messages, // 插入消息资源
  fallbackLocale: 'en', // 没有找到当前语言就切换到这个
})

// 在组件中使用 i18n
export default class MyComponent extends Vue {
  setup() {
    const { t } = useI18n()
    this.greeting = t('hello')
  }
}

// 在入口文件 app.tsx 或 main.js 中创建并挂载应用
createApp(MyComponent)
  .use(i18n)
  .mount('#app')

4. 在组件内动态改变语言：

import { useRouter } from 'vue-router'
...
router.onRouteChange(() => {
  i18n.locale = router.query.lang ?? i18n.locale // 根据路由参数切换语言
})