vue3中vue-i18n中英文切换

在Vue3中，使用vue-i18n进行中英文切换的步骤如下：
1. 首先，在main.js文件中，引入Vue和VueI18n，并创建一个实例i18n。

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh', // 默认语言为中文
  messages: {
    zh: {
      // 中文语言包
      // ...
    },
    en: {
      // 英文语言包
      // ...
    }
  }
})

2. 在Vue实例中挂载i18n实例。

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

3. 在组件中使用`$t`或`$tc`来进行语言切换。

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <!-- 或者使用命名空间 -->
    <p>{{ $t('namespace.message.hello') }}</p>
  </div>
</template>

4. 在切换语言的时候，通过调用`$i18n.locale`来改变当前的语言。

methods: {
  switchLanguage(lang) {
    this.$i18n.locale = lang;
  }
}

这样就可以在Vue3中使用vue-i18n进行中英文切换了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [使用vue-i18n进行简单的中英文切换](https://blog.csdn.net/s_9527_s/article/details/124041130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue切换中英语言制作方法（Element+i18n的使用）](https://blog.csdn.net/weixin_44748171/article/details/127647875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]