vue3全局创建一个i18n 在单个组件内部创建一个局部的i18n

Vue 3 中全局创建一个 i18n 实例通常会使用 `vue-i18n` 插件，这是一个为 Vue.js 应用提供多语言支持的插件。创建全局 i18n 的步骤大致如下：

1. 首先，需要安装 `vue-i18n`。可以通过 npm 或 yarn 来安装：

   npm install vue-i18n
   # 或者
   yarn add vue-i18n

2. 在项目中创建一个 `i18n` 实例，并配置需要的语言环境和本地化消息：

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

   // 引入本地化消息字典
   import messages from './lang';

   const i18n = createI18n({
     locale: 'zh-CN', // 设置默认语言
     fallbackLocale: 'en', // 当目标语言找不到翻译时，回退到的语言
     messages, // 设置本地化消息字典
   });

   export default i18n;

3. 在 `main.js` 或 `main.ts` 中引入并使用这个 i18n 实例：

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

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

这样，一个全局的 i18n 实例就创建完成了，可以在任何组件中通过 `this.$i18n` 来访问和使用它。

对于单个组件内部创建一个局部的 i18n，可以通过在组件中直接使用 `provide` 和 `inject` 来实现局部的 i18n 实例。这样做的好处是可以为不同的组件提供不同的语言环境而不影响全局。示例如下：

<template>
  <!-- 组件模板 -->
</template>

<script>
import { provide } from 'vue';
import { createI18n } from 'vue-i18n';

export default {
  setup() {
    const i18n = createI18n({
      locale: 'en', // 设置组件内部使用的语言
      messages: {
        // 组件内部的本地化消息
        en: {
          message: 'Hello!'
        }
      }
    });

    provide('i18n', i18n);

    return {};
  }
};
</script>

在子组件中，可以通过 `inject` 注入父组件提供的局部 i18n 实例，并使用它来获取翻译文本。