Vue I18n 实现多语种

yarn add vue-i18n

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

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',   // 通过 this.$i18n.locale 修改语种
  messages: {
    'zh': require('@/utils/lang/zh'),
    'en': require('@/utils/lang/en')
  }
})

export const lang = {
  header: {
    title: '标题'
  }
}

export const lang = {
  header: {
    title: 'title'
  }
}

// html 中
<span> {{ $t('lang.header.title') }} </span>

// js 中
this.$i18n.t('lang.header.title')

<v-btn text @click="handlerChangeLang"> {{ this.$i18n.locale }} </v-btn>

// 简单中英切换
handlerChangeLang() {
  if (this.$i18n.locale === "zh") {
    this.$i18n.locale = "en";
  } else {
    this.$i18n.locale = "zh";
  }
}