Vue.js国际化插件vue-i18n的使用

安装方法

使用CDN直接引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

NPM

$ npm install vue-i18n

Yarn

$ yarn add vue-i18n

vue-i18n插件使用参考文档：http://kazupon.github.io/vue-i18n/en/

使用方法

Vue.js

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

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好世界'
    }
  }
}

const i18n = new VueI18n({
  locale: 'zh',
  messages
})

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

HTML

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