vue3使用vue-i18n进行中英文切换

1. 安装vue-i18n

   npm install i18n -save
   

2. 在src目录下创建language目录，用于存放语言映射文件
   在language目录下创建三个js文件
   en.js（英文语言包）

   export default {
       menu: {
           home: 'home',
           book: 'skillBook'
       },
       logo: {
           name: 'blog of BoboWithoutIce'
       }
   }
   

   zh.js（中文语言包）

   export default {
       menu: {
           home: '首页',
           book: '技能书'
       },
       logo: {
           name: '波波不加冰的博客'
       }
   }
   

   index.js (对i18n进行配置)

       import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
       import zh from './zh';
       import en from './en';
       //注册i18n实例并引入语言文件
       const i18n = createI18n({
           legacy:false,
           locale: 'zh', // 语言标识（默认中文）
           globalInjection:true, //全局注册 $t方法
           messages: {
               zh,
               en
           }
       });
       export default i18n
   

3. 在main.js文件中使用 i18n
   main.js

   import { createApp } from 'vue'
   import App from './App.vue'
   import  i18n  from './language/index.js'
   const app = createApp(App)
   app.use(i18n)
   app.mount('#app')
   

4. 在具体的文件中使用 i18n，例子如下：
   使用$t() 对语言文件中的key进行包裹即可，如：$t('logo.name')、$t('menu.home')
   其中key自定义，根据文件中的层级关系书写

   <div class="logo-text" @click="logo()">{{$t('logo.name')}}</div>
   

5. 切换中英文方法：
   通过点击事件，给this.$i18n.locale赋值即可动态切换，如下

   toggleLanguage(){
     this.$i18n.locale = this.language === 'zh' ? 'zh' : 'en';
   }
   

   切换标签

   <div class="nav-en" @click="toggleLanguage">
     {{ language }}
   </div>