vue2中使用中英文切换i18n

1、下载i18n语言切换插件
vue2下载npm i 8.22.2@8.22.2 vue3应该是9以上的版本
2、创建文件，根据自己需求放置在不同的文件夹下

zh-CH.json
{
  "langName": "中文",
  "menuList": {
    "home": "主页",
    "user": "用户管理",
    "roles": "角色管理",
    "notice": "通知公告",
    "logs": "日志管理"
  }
}
en-US.json
{
  "langName": "en-US",
  "menuList": {
    "home": "Home",
    "user": "User management",
    "roles": "Role management",
    "notice": "Notice Announcement",
    "logs": "log management"
  }
}

3、在main.js文件中使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh-CN', // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地manifest配置获取等，根据场景动态获取
  messages: {
    'zh-CN': require('./api/languages/zh-CN.json'),  // 本地资源文件，我这里配2个语言，中文&英文，src下根据个人情况放置
    'en-US': require('./api/languages/en-US.json')
    // 'mn-MN': require('./api/languages/mn-MN.json')
  }
});
new Vue({
  router,
  store,
  i18n,   //把 i18n 挂载到 vue 根实例上components: {
  render: h => h(App)
}).$mount('#app')

4、在组件中使用（通过$t(‘xxx’)）的方式中使用

<template>
  <div class="menuWrap">
    {{ $t('langName') }}
    <div class="menuInner">
      {{ $t('menuList.home') }}
    </div>
    <div class="menuInner">
      {{ $t('menuList.user') }}
    </div>
    <div class="menuInner">
      {{ $t('menuList.roles') }}
    </div>
    <div class="langWrap">
      <button class="langInner" @click="handleCh">中文</button>
      <button class="langInner" @click="handleEn">英文</button>
      <!-- <button class="langInner" @click="handleMn">火星文</button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      langName: ''
    }
  },
  created() {
    this.langName = this.$t('langName')
  },
  methods: {
    handleCh() {
      this.$i18n.locale = 'zh-CN'
    },
    handleEn() {
      this.$i18n.locale = 'en-US'
    }
    // handleMn() {
    //   this.$i18n.locale = 'mn-MN'
    // }
  }
}
</script>