Vue3.0 + TS配置国际化vue-i18n

要在Vue 3.0和TypeScript中配置vue-i18n，请按照以下步骤操作：

1. 安装vue-i18n:

npm install vue-i18n@next

2. 在你的Vue项目中创建一个i18n配置文件，例如i18n.ts:

import { createI18n } from 'vue-i18n';
 
const messages = {
  en: {
    message: {
      hello: 'hello'
    }
  },
  fr: {
    message: {
      hello: 'bonjour'
    }
  }
};
 
const i18n = createI18n({
  locale: 'en', // set default locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
});
 
export default i18n;

3. 在你的main.ts或main.js文件中引入并使用这个i18n实例：

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n'; // 引入i18n配置
 
const app = createApp(App);
 
app.use(i18n);
 
app.mount('#app');

4. 在你的Vue组件中使用$t函数来访问翻译的文本：

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

确保你的Vue项目配置能够支持TypeScript（例如，有适当的tsconfig.json和相关的类型定义）。这样就完成了Vue 3.0和TypeScript环境下的vue-i18n配置。