VUE+webpack+npm+elementUI项目中的多语言vue-i18n@8.x

一、vue-i18n@8.x安装

二、引入vue-i18n@8.x

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

三、引入使用的组件语言包（如：elementUI）

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'

四、创建自定义语言包，与组件语言包合并

const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}

五、创建VueI18n instance

const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

六、elementUI使用定制的i18n统一管理

ElementLocale.i18n((key, value) => i18n.t(key, value))

七、挂载

new Vue({
    el: '#app',
    router,
    i18n,
    components: { App },
    template: '<App/>'
})

八、使用

• {{$t(message)}}：

　　　　自定的message

　　　　locale: 'en',显示为 hello

　　　　locale: 'zh',显示为 你好

• el.select.placeholder：

　　　　elementUI中的语言包

　　　　locale: 'en',显示为 Select

　　　　locale: 'zh',显示为 请选择

有错漏知错欢迎指教~~