i18n国际化（引入饿了么语言包）

npm install vue-i18n@6

npm i element-ui -S

如果安装失败，或者有报错，大概率版本问题

第一步

在src下创建18n文件夹，里面创建i18n.js。然后再创建一个lang文件夹，里面创建3个文件，zh.js           en,js              index.js

第二步

zh.js中引入饿了么语言包

import zhlocale from 'element-ui/lib/locale/lang/zh-CN'
const zhcn = {
    message:{
        'text':'你好，欢迎你，这是国际化'
    },
    // 这意思就是展开运算符复制一份语言包过来到这里
...zhlocale
​
}
// 暴露
export default zhcn

en.js也是如此做法

import enlocale from 'element-ui/lib/locale/lang/en'
const en = {
    message:{
        'text':'hi~~~~~~~~~~'
    },
    // 这意思就是展开运算符复制一份语言包过来到这里
...enlocale
​
}
// 暴露
export default en

3.

在index.js中引入上面那2个js，封装集合

// 这边接收那2个暴露的，统一封装
import zhcn from "./zh";
import en from "./en";
export default{
    // 给他们设置标识符
    en,zhcn
}

4.

在i18n.js中写入这些配置

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './lang'
Vue.use(VueI18n)
//从localStorage获取语言选择。
const i18n = new VueI18n({
 locale: localStorage.lang || 'zhcn', //初始未选择默认 zhcn 中文
 messages
})
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
​
export default i18n

5.

在main.js中引入

// 这个引入的是魔改好的i18n
import i18n from './18n/i18n'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
​
​
new Vue({
  i18n, 
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6.

在页面组件可以使用了，不用引入，模板示例

   {{$t('message.text')}}
   {{$t('el.datepicker.now')}}

7.

切换语言，看你使用的是什么方法，可以vuex，可以本地储存

我这里用个本地储存，方便一点

  methods:{
      qiehuan(){
        // 在localStorage中设置一个lang的属性，他的属性值为en，也就是英文
        localStorage.setItem('lang', 'en');
      },
       zh(){
        localStorage.setItem('lang', '');
      }
    }

8.

刷新页面！！！！数据就变了！！！！！！！！！！！！