vue3 i18n ts中怎么使用

在Vue3中使用i18n实现国际化可以通过以下步骤进行：

1. 安装依赖：`npm install vue-i18n@next --save`

2. 创建`i18n`实例：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // 是否兼容Vue2的i18n语法
  locale: 'en', // 默认语言
  messages: {
    en: {
      message: {
        hello: 'Hello World!'
      }
    },
    zh: {
      message: {
        hello: '你好，世界！'
      }
    }
  }
})

3. 在组件中使用：

<template>
  <div>
    {{ $t('message.hello') }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    return {}
  }
})
</script>

4. 如果需要在TypeScript中使用，则需要在项目中定义类型：

import { App, ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
import { RouteLocationNormalized } from 'vue-router'
import { I18n } from 'vue-i18n'

declare module '@vue/runtime-core' {
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
    $route: RouteLocationNormalized
    $router: any
    $i18n: I18n
  }
}

declare module 'vue-i18n' {
  interface Composer {
    t(key: string, values?: any): string
  }
}

以上就是使用Vue3+TypeScript+Vue-i18n实现国际化的基本流程。