Vue 实现i18n国际化

Vue 可以通过使用插件或者自定义指令来实现国际化(i18n)。

一种常见的方式是使用 vue-i18n 插件来实现国际化。你可以先安装 vue-i18n 插件：

npm install vue-i18n

然后在 Vue 项目中引入并配置它：

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({
  el: '#app',
  i18n,
  template: '<div>{{ $t("greeting") }}</div>'
})

上述代码中，我们首先引入并使用了 vue-i18n 插件。然后创建一个 i18n 实例，其中 `locale` 字段指定了默认语言，默认为英文(`en`)。`messages` 字段中定义了各个语言对应的翻译内容。

在 Vue 实例中，我们将 i18n 实例注入到 Vue 实例中，并在模板中使用 `$t` 方法来获取需要国际化的文本内容。

你可以在组件中使用 `$t` 方法来获取当前语言下的翻译内容，或者使用 `this.$i18n.locale` 来获取当前语言设置。

这是一个简单的示例，你可以根据自己的需求进行配置和扩展。希望能帮到你！