vue-i18n + element 国际化

1.创建i18n文件夹结构目录

2.

cn.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // element ui 中文

const cn = {
  message: {
    'main': '你好,世界',
    'footer': '尾部',
    'look': '查看',
    'add': '新增',
    'del': '删除',
    menu: {
      calendar: '日历',
      echart: '图表',
      fullScreen: '屏幕'
    }
  },
  ...zhLocale // element ui 中文
}

export default cn

en.js

import enLocale from 'element-ui/lib/locale/lang/en' // element ui 英文

const en = {
  message: {
    'main': 'hello,world',
    'footer': 'footer',
    'look': 'show',
    'add': 'add',
    'del': 'delete',
    menu: {
      calendar: 'calendar',
      echart: 'echart',
      fullScreen: 'screen'
    }
  },
  ...enLocale // element ui 英文
}

export default en

index.js

import cn from './cn'
import en from './en'

export default {
  en,
  cn
}

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'
import ElementLocale from 'element-ui/lib/locale' // element ui 内部国际化


Vue.use(VueI18n)


const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})

//this.$i18n.locale = this.value 语言切换时，element语言随之切换

ElementLocale.i18n((key, value) => i18n.t(key, value)) // element ui 内部国际化

export default i18n

3.

main.js

预览效果：https://github.com/iswtt/vue-cli4.0-init.git