在vue2中使用i18n一定切记要使用8版本，否则将无法正常使用！！！

npm install [email protected] --save

1、在src目录下，创建新的文件夹，命名为i18n

在文件夹i18n中新建langs文件夹，里边放语言文件.js
  zh.js：存放所有的中文显示内容
  en.js：存放所有的英文显示内容
 与langs文件夹同级，创建index.js：用于配置i18n，并导出i18n 

zh.js

export default { 
  //中文
  msg: {
      msg1: '测试一'
  }
}

en.js

export default { 
  //英文
    msg: {
        msg1: 'test one'
    }
}

index.js

import Vue from "vue"
import VueI18n from "vue-i18n"
//引入自定义语言配置  
import zh from './langs/zh'
import en from './langs/en'
//引入UI框架语言配置---elementui
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包

ElementLocale.i18n((key, value) => i18n.t(key, value)) 
Vue.use(VueI18n);


const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || "en", 
    messages: {
        // 中文语言包
        'zh': {
            ...zh,
            ...zhLocale
        },
        //英文语言包
        'en': {
            ...en,
            ...enLocale
        }
    },
    globalInjection: true, 
    fallbackLocale: 'en', 
});

export default i18n

2、在main里导入语言包文件

main.js

import i18n from './i18n/index'

Vue.use(ELEMENT,
  {
    i18n: (key, value) => i18n.t(key, value)
  }
)
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App)
}).$mount('#app')

3、使用方式

<h1>{{ $t('msg.msg1') }}</h1>