vue框架国际化(基于element-ui)-01

1.package.json引入vue-i18n模块

npm install vue-i18n --save

2.新建src/lang/en.js

内容示例如下：

export default {
  key1: 'value1',
  key2: {
    key21: 'value21'
  }
}

3.新建src/lang/zh.js

内容实例如下

export default {
  key1: '值1',
  key2: {
    key21: '值21'
  }
}

3.新建src/lang/index.js

内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', // set locale
  messages // set locale messages
})

export default i18n

4.在src/main.js中添加

import i18n from './lang'

Vue.use(ElementUI, {
  size: 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  // template: '',
  // components: { App }
  render: h => h(App)
})

5.使用

{{ $t("key2.key21") }}

this.$t('key2.key21')