VUE3 ts怎么使用i18n

以下是使用Vue3和TypeScript实现i18n的步骤：

1.安装依赖

npm install vue-i18n@next

2.创建i18n.ts文件

import { createI18n } from 'vue-i18n';
import messages from './locales';

const i18n = createI18n({
  locale: 'en', // 默认语言
  messages,
});

export default i18n;

3.创建locales.ts文件

const messages = {
  en: {
    message: {
      hello: 'Hello world!',
    },
  },
  cn: {
    message: {
      hello: '你好，世界！',
    },
  },
};

export default messages;

4.在main.ts中引入i18n

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

createApp(App).use(i18n).mount('#app');

5.在组件中使用i18n

<template>
  <div>
    <h2>{{ $t('message.hello') }}</h2>
    <button @click="switchLanguage">Switch language</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  setup() {
    const { t, locale } = useI18n();
    const switchLanguage = () => {
      locale.value = locale.value === 'en' ? 'cn' : 'en';
    };
    return {
      t,
      switchLanguage,
    };
  },
});
</script>