在Vue.js中显示i18n文本中的组件

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: {
    en: {
      // 英文文本
      greeting: 'Hello!',
    },
    zh: {
      // 中文文本
      greeting: '你好！',
    },
  },
});

new Vue({
  i18n,
  // 组件选项
});

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

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

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