vue-i18n中英文切换

要实现vue-i18n中英文切换，可以按以下步骤进行：

1. 安装vue-i18n

npm install vue-i18n

2. 在main.js中初始化vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

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

new Vue({
  el: '#app',
  i18n, // 注入i18n实例
  components: { App },
  template: '<App/>'
})

3. 在组件中使用i18n

在模板中使用 `$t` 方法来获取翻译文本：

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

在script中使用 `$i18n.locale` 来判断当前语言，并且通过 `$i18n.setLocaleMessage` 来动态修改语言包：

<script>
export default {
  methods: {
    changeLang(lang) {
      if (this.$i18n.locale !== lang) {
        this.$i18n.locale = lang
        import(`./locales/${lang}.json`).then(msgs => {
          this.$i18n.setLocaleMessage(lang, msgs.default || msgs)
        })
      }
    }
  }
}
</script>

4. 在语言包中添加翻译文本

// en.json
{
  "hello": "Hello, world!"
}

// zh.json
{
  "hello": "你好，世界！"
}

5. 在页面中添加语言切换按钮，并绑定事件

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