vue3界面中英文切换全局

要在Vue 3应用程序中实现全局中英文切换，可以使用Vue I18n库。这个库可以让你轻松地实现国际化和本地化。

以下是实现步骤：

1. 首先，安装Vue I18n库。可以使用npm或yarn来安装：

npm install vue-i18n --save

或

yarn add vue-i18n

2. 创建一个i18n.js文件并在其中设置i18n配置。在这个文件中，你需要设置默认的语言和翻译，以及一些i18n选项。

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en,
    zh
  }
})

export default i18n

在上面的代码中，我们从"./locales/"目录中导入了en.json和zh.json文件，这些文件包含了我们的翻译。我们还设置了默认的语言为英语（en）和回退语言为英语（fallbackLocale: 'en'）。

3. 在你的Vue应用程序的入口文件main.js中导入i18n.js文件并将其应用到Vue实例中。

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

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

在上面的代码中，我们使用Vue.createApp()创建了一个新的Vue实例，并使用i18n插件将i18n配置应用到Vue实例中。

4. 在你的Vue组件中使用i18n。可以使用$t()函数来获取翻译。

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <p>{{ $t('message') }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  mounted() {
    console.log(this.$t('message'))
  }
}
</script>

在上面的代码中，我们使用了$t()函数来获取'title'和'message'的翻译。如果当前的语言设置为英语，$t('title')将返回"Hello World"，$t('message')将返回"Welcome to my Vue app!"。

5. 最后，你需要提供一个切换语言的方法，以便用户可以在应用程序中切换语言。你可以通过在i18n实例中设置locale属性来实现这一点。

<i18n>
  {
    "title": "Hello World",
    "message": "Welcome to my Vue app!",
    "switch_language": "Switch Language",
    "current_language": "Current Language: "
  }
</i18n>

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <p>{{ $t('message') }}</p>
    <button @click="switchLanguage">{{ $t('switch_language') }}</button>
    <p>{{ $t('current_language') }}{{ $i18n.locale }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    switchLanguage() {
      if (this.$i18n.locale === 'en') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
    }
  }
}
</script>

在上面的代码中，我们在Vue组件中定义了一个switchLanguage()方法，当用户点击"Switch Language"按钮时，该方法将切换当前语言。我们还在模板中添加了一个显示当前语言的文本，以便用户知道当前的语言是什么。

以上就是实现Vue 3全局中英文切换的步骤。