element使用Vue-i18n进行国际化

一、关于Vue版的兼容性问题
最新的Vue-i8n的版本是9X 支持的版本为Vue3.0+，需要使用往期版本进行制作。
我使用的vue、element和vue-i18n版本如下

"element-ui": "^2.13.0",
 "vue": "2.5.17",
 "vue-i18n": "^7.0.5"

二、main.js的配置
首先使用npm将vue-i18n拉下来

 npm install vue-i18n -save

1.main.js的配置

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入Element的语言包和vue-i8n的配置
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n);
const i18n = new VueI18n({
 locale: sessionStorage.getItem('language')||'zh',
  messages:{
    'en':Object.assign(require('./lang/en.json'),enLocale),//将我们项目中的语言包与Element的语言包进行合并
    'zh':Object.assign(require('./lang/zh.json'),zhLocale),
  },
});
Vue.use(ElementUI,{
  size: 'small',
 i18n:(key,value) =>i18n.t(key,value)
});
//在你的newVue时候插入i8n这个组件全局注册生效
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
});

2.新建文件夹lang和配置en.json和zh.json

文件新建在项目的src目录下
en.json

{
    "username": "username",
    "password": "password",
}

zh.json

{
    "username": "用户名",
    "password": "密码",
}

三、在代码当中的使用
npm引入vue-i8n，配置main.js和创建lang文件后就完成了配置
1.在html使用

<h3 class="title">{{$t('homename')}}</h3>
<p :title="$t('homename')" /></p>

2.在js中使用

this.$t("username")

3.改变语言环境

this.$i18n.locale = 'zh'
this.$i18n.locale = 'en'

4.可以将json更改成更适合整理的格式

{
    "login":{
        "username": "用户名",
        "password": "密码"
    }
    
}

四、如何在Vue-router中使用国际化

{
      id: '006',
      path: 'inquiryList',
      name: 'inquiryList',
      component: () => import('@/views/inquiry/inquiryList'),
      meta: { title: 'login.username', goTags: true },
    },

将router中的title写成需要获取的国际化参数
循环参数时将国际化的参数传输过去 如果有对应就会更改

<template slot="title">
   <item v-if="item.meta" :icon="item.meta.icon" :title="$t(item.meta.title)" />
</template>