vue3国际化vue-i18n，实现setup中的内容中英文切换

您可以使用vue-i18n库来实现在Vue 3的setup函数中进行内容的中英文切换。

首先，您需要安装vue-i18n库。您可以使用以下命令进行安装：

npm install vue-i18n@next

然后，在您的Vue 3项目中创建一个i18n.js文件，并添加以下代码：

import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    // 英文内容
    greeting: 'Hello!',
    ...
  },
  zh: {
    // 中文内容
    greeting: '你好！',
    ...
  }
}

const i18n = createI18n({
  locale: 'en', // 默认语言为英文
  messages
})

export default i18n

接下来，在您的主入口文件main.js中导入i18n.js并将其添加到Vue应用程序中：

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

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

现在，您可以在组件的setup函数中使用$t方法来访问翻译后的文本。例如：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()

    // 切换语言为英文
    const switchToEnglish = () => {
      t.setLocale('en')
    }

    // 切换语言为中文
    const switchToChinese = () => {
      t.setLocale('zh')
    }

    return {
      switchToEnglish,
      switchToChinese
    }
  }
}

在模板中，您可以通过在文本上使用$t来进行翻译。例如：

<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <button @click="switchToEnglish">Switch to English</button>
    <button @click="switchToChinese">切换到中文</button>
  </div>
</template>

这样，您就可以在Vue 3的setup函数中实现内容的中英文切换了。请注意，您需要根据您的实际需求进行适当的配置和调整。