后台管理系统国际化方案

背景：pc后台管理系统需要支持国际化，项目使用的的是vue全家桶。

i18n是什么

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称

实现过程

页面中单个dom节点的国际化，比如说某个div的内容，中文状态：盒子，英文状态：box

使用vue-i18n方案实现

1、安装依赖

npm install vue-i18n

2、实例化和挂载

// 使用该插件
import Vue from 'vue'import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
  en: {
    message: {
        hello: 'hello world'
     }
  },
  ja: {
    message: {
        hello: 'こんにちは、世界'
    }    
  }
}
// 实例化
const i18n = new VueI18n({
    locale: 'en' | 'zh' | 'es'    messages
})
// 挂载到dom上
new Vue({
    el: '#app',    i18n,    render: h => h(App)
})

3、使用

<el-dropdown-item>   {{ $t('message.hello') }}</el-dropdown-item>