Element plus中的 i18n怎么实现中英文随时切换

Element Plus 的 i18n 实现中英文随时切换的步骤如下：

1. 在项目中安装 `vue-i18n` 包

npm install vue-i18n --save

2. 在入口文件 `main.js` 中引入 `vue-i18n` 并且配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale'
import App from './App.vue'

Vue.use(VueI18n)
Vue.use(ElementUI)

const messages = {
  'zh-CN': require('./assets/lang/zh'), // 中文语言包
  'en-US': require('./assets/lang/en') // 英文语言包
}

const i18n = new VueI18n({
  locale: 'zh-CN', // set locale
  messages // set locale messages
})

locale.i18n((key, value) => i18n.t(key, value)) // 兼容element-ui的国际化

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

3. 在项目中创建语言包

在 `src/assets/lang` 目录下创建 `zh.js` 和 `en.js` 文件，分别用于存放中文和英文语言包。例如：

// zh.js 中文语言包
module.exports = {
  message: {
    hello: '你好',
    about: '关于我们',
    contact: '联系我们'
  }
}

// en.js 英文语言包
module.exports = {
  message: {
    hello: 'Hello',
    about: 'About Us',
    contact: 'Contact Us'
  }
}

4. 在组件中使用 `$t` 方法进行语言切换

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <p>{{ $t('message.about') }}</p>
    <p>{{ $t('message.contact') }}</p>
    <el-button @click="changeLocale('zh-CN')">中文</el-button>
    <el-button @click="changeLocale('en-US')">English</el-button>
  </div>
</template>

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

在组件中使用 `$t` 方法可以获取当前语言下对应的翻译文本。使用 `this.$i18n.locale` 可以修改当前语言环境，从而实现中英文随时切换。