vue多语言

vue中实现语言切换的方式如何实现的

1.NPM 项目安装

cnpm i vue-i18n

2.使用方法

/* 国际化使用规则 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
<!-- 需要国际化的数据定义在此处 -->
const messages = {
  en: {
    message: {
      hello: 'world hello'
    }
  },
  zh: {
    message: {
      hello: '世界'
    }
  }
}
<!-- 使用i18n -->
const i18n = new VueI18n({
  locale: 'zh',
  messages
})

export default {
  data () {
    return {
      hello: this.$t('message.hello')
    }
  },
  i18n
}

3.页面数据使用

<div id="#app">
  <p>{{ $t("message.hello") }}</p>
</div>