vue-i18n 在TS中应用

vue-i18n 是一个用于在 Vue.js 应用程序中实现国际化的库。它提供了一种简单而灵活的方式来处理多语言的需求。在 TypeScript 中使用 vue-i18n，你可以按照以下步骤进行配置和应用：

1. 安装 vue-i18n：在项目中使用 npm 或者 yarn 安装 vue-i18n。

2.＊＊＊json` 和 `en-US.json` 文件，分别用于存放中文和英文的翻译内容。

3. 配置 vue-i18n：在项目的入口文件中，引入 vue-i18n 并进行配置。你可以创建一个 `i18n.ts` 文件，内容如下：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  'zh-CN': require('./locales/zh-CN.json'),
  'en-US': require('./locales/en-US.json'),
};

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  fallbackLocale: 'en-US', // 当当前语言不存在时使用的语言
  messages,
});

export default i18n;

4. 在组件中使用翻译：在需要翻译的组件中，使用 `$t` 方法来获取翻译内容。例如：

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

<script>
export default {
  name: 'MyComponent',
};
</script>

5. 在语言文件中定义翻译内容：在 `zh-CN.json` 和 `en-US.json` 文件中，定义对应的翻译内容。例如：

// zh-CN.json
{
  "message": {
    "welcome": "欢迎使用 Vue-i18n"
  }
}

// en-US.json
{
  "message": {
    "welcome": "Welcome to Vue-i18n"
  }
}

这样，你就可以根据当前的语言环境来动态显示对应的翻译内容了。