vue3 配置i18n

在 Vue 3 中配置 i18n（国际化）可以通过以下步骤进行：

1. 首先，安装 `vue-i18n` 包。可以使用 npm 或 yarn 进行安装：

   npm install vue-i18n

或者

   yarn add vue-i18n

2. 创建一个名为 `i18n.js` 的文件，并在其中配置 i18n 设置。示例配置如下：

   import { createApp } from 'vue';
   import { createI18n } from 'vue-i18n';

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

   const i18n = createI18n({
     locale: 'en', // 默认语言
     fallbackLocale: 'en', // 当当前语言无法找到对应的翻译时，回退到的语言
     messages // 消息对象，包含各种语言的翻译
   });

   const app = createApp(App);

   app.use(i18n);

   app.mount('#app');

在上面的例子中，我们定义了两种语言：英文和中文。每个语言都有一个 `message` 对象，并包含一个 `hello` 属性。

3. 在组件中使用国际化文本。可以通过 `$t` 方法来获取翻译后的文本。示例：

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

在上面的例子中，`$t` 方法将根据当前语言返回对应的翻译文本。

4. 切换语言。可以通过 `$i18n.locale` 属性来切换当前语言。示例：

   <template>
     <div>
       <button @click="changeLanguage('en')">English</button>
       <button @click="changeLanguage('zh')">中文</button>
     </div>
   </template>

   <script>
   export default {
     methods: {
       changeLanguage(locale) {
         this.$i18n.locale = locale;
       }
     }
   };
   </script>

在上面的例子中，点击按钮将会切换当前语言为英文或中文。

这样就完成了 Vue 3 中的 i18n 配置。你可以根据自己的需求进行更多的配置和使用。