vue3国际化多语言

Vue 3 中的国际化多语言可以通过插件或者库来实现。下面是一种常见的方法：

1. 安装 `vue-i18n` 库：

npm install vue-i18n

2. 在 Vue 项目的入口文件中引入并使用 `vue-i18n`：

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

const i18n = createI18n({
  locale: 'en', // 默认语言
  messages: {
    en: {
      message: {
        hello: 'Hello, world!'
      }
    },
    zh: {
      message: {
        hello: '你好，世界！'
      }
    }
  }
});

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

3. 在组件中使用国际化的文本：

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

4. 在组件中切换语言：

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

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

通过以上步骤，您可以在 Vue 3 中实现国际化多语言功能。您可以根据需要添加更多的语言和对应的翻译内容。