vue项目国际化的插件 vue-i18n 使用教程以及和element-ui结合使用

1.安装vue-i18n
npm i --save vue-i18n
2.项目配置vue-i18n
在src文件夹下新建文件夹i18n
在i18n 文件夹下新建文件 index.js和文件夹lang
在lang文件夹下新建zh.js 和en.js
3.现在说一下各文件的配置和写法
（1）index.js配置

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './lang/zn';
import en from './lang/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: localStorage.getItem('locale') || 'zh',  // 语言标识
    // 添加多语言（每一个语言标示对应一个语言文件）
    messages: {
        zh,
        en,
    }
})
// 暴露i18n
export default i18n;

（2）en.js

import enLocale from 'element-ui/lib/locale/lang/en' //引入element-ui英文内容
const en = { 
    ...enLocale, //控制 element ui 语言
    topbar : { 
      login:"Login",
      register:"register",
      welcome:'Welcome',
      signOut:'Sign Out',
      myOrder:'MyOrder'
    }, 
}

（3）zh.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'  // 引入element-ui中文内容
const zh= { 
    ...zhLocale, //控制 element ui 语言
    topbar : { 
      login:"登录",
      register:"注册",
      welcome:'欢迎',
      signOut:'退出',
      myOrder:'我的订单'
    },
}

（4）在mian.js中引入i18n和element-ui, 并挂载到vue实例

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
/**
 * 引入i18n国际化
 */
import i18n from './i18n/index'
// 引入配置element-ui
import ElementUI from 'element-ui'
import ElementLocale from 'element-ui/lib/locale'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
ElementLocale.i18n((key, value) => i18n.t(key, value)) // i18n控制ui插件语言
new Vue({
  i18n,     //挂载  非常重要
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4.项目中使用
（1）通过$t()方法引入文案

<div class="title">{{$t('topbar.login')}}</div>

（2）修改语言的方法

this.$i18n.locale = 'en';

（3）案例

<template>
    <div>
        <div class="tab">
            <span @click="tab('zh')">中文</span>|
            <span @click="tab('en')">英文</span>
        </div>
        <!-- 通过$t()方法引用文案： -->
        <div class="title">{{$t('topbar.login')}}</div>
    </div>
</template>
<script>
export default {
  name: 'lang',
    data () {
        return {
        }
    },
    methods:{
        tab(type){
            localStorage.setItem('locale',type)        // 语言选择记录
            this.$i18n.locale = type;
        }
    }
}
</script>