Vue3项目切换语言使用vue-i18n前端实现中英文切换。 看清楚 是vue3项目

在Vue3项目中使用`vue-i18n`实现中英文切换，可以按照以下步骤进行：

1. 安装`vue-i18n`库

   npm install vue-i18n

2. 在`main.js`中引入和配置`vue-i18n`

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

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

   const i18n = createI18n({
     locale: 'zh', // 默认语言
     messages
   })

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

3. 在组件中使用`$t`方法进行翻译

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

   <script>
   export default {
     name: 'HelloWorld'
   }
   </script>

4. 在需要切换语言的地方，通过`i18n.locale`属性改变语言

   <template>
     <div>
       <button @click="changeLanguage('en')">English</button>
       <button @click="changeLanguage('zh')">中文</button>
       {{ $t('message.hello') }}
     </div>
   </template>

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

以上就是在Vue3项目中使用`vue-i18n`实现中英文切换的基本步骤。