如何使用Vue和Element-UI进行国际化多语言处理

npm install vue-i18nnpm install vant

import Vue from 'vue'import VueI18n from 'vue-i18n'import vant from 'vant'import 'vant/lib/index.css'Vue.use(VueI18n)Vue.use(vant)// 初始化i18n实例const i18n = new VueI18n({  locale: 'zh-CN',  // 默认语言  fallbackLocale: 'en',  // 如果当前语言包中没有对应的翻译文本，就会使用fallbackLocale中定义的语言包  messages: {    'zh-CN': require('./lang/zh-CN.json'),  // 引入中文语言包    'en': require('./lang/en.json')  // 引入英文语言包  }})// 将i18n实例绑定到Vue实例上new Vue({  el: '#app',  i18n,  render: h => h(App)})

{  "hello": "你好",  "welcome": "欢迎使用",  "button": {    "submit": "提交",    "cancel": "取消"  },  ...}

{  "hello": "Hello",  "welcome": "Welcome",  "button": {    "submit": "Submit",    "cancel": "Cancel"  },  ...}

<template>  <div>    <h2>{{ $t('hello') }}</h2>    <p>{{ $t('welcome') }}</p>    <button @click="submit">{{ $t('button.submit') }}</button>    <button @click="cancel">{{ $t('button.cancel') }}</button>  </div></template><script>export default {  name: 'MyComponent',  methods: {    submit() {      // 提交操作    },    cancel() {      // 取消操作    }  }}</script>

<template>  <div>    <h2>{{ 'hello' | t }}</h2>    <p>{{ 'welcome' | t }}</p>    <button @click="submit">{{ 'button.submit' | t }}</button>    <button @click="cancel">{{ 'button.cancel' | t }}</button>  </div></template><script>export default {  name: 'MyComponent',  filters: {    t(key) {      return this.$t(key)    }  },  methods: {    submit() {      // 提交操作    },    cancel() {      // 取消操作    }  }}</script>

<template>  <div>    <button @click="changeLocale('zh-CN')">中文</button>    <button @click="changeLocale('en')">English</button>  </div></template><script>export default {  name: 'LanguageSwitcher',  methods: {    changeLocale(locale) {      this.$i18n.locale = locale    }  }}</script>