vue2 element ui 使用i18n 国际化配置

前提npm install vue-i18n

第一步：vue项目下新建locals文件夹，里面配置index.js内容如下，同时新建zh.js 和 en.js作为语言配置文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementLocal from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en' //引入elementui语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入ele语言包
const cn = require('./zh') //中文对应
const en =  require('./en')//英文对应
Vue.use(VueI18n) 
//使用的是sessionStroage中存储的的lang，默认是中文简体cn
var language = window.sessionStorage.getItem('lang') || 'cn'
const i18n = new VueI18n({
  locale: language,//将i18n的locale设置为你需要的语言
  messages: {
    'cn':{
            ...zhLocale,...cn
    },
    'en':{ ...enLocale,...en}
  },
  silentFallbackWarn: true
})
ElementLocal.i18n((key, value) => i18n.t(key, value));
export default i18n 

zh.js 和 en.js文件示例：

module.exports = {
  Save: "保存",
}

使用示例：

<el-button type="primary" @click="hanldeSubmit" :loading="loading">{{$t("Save")}}</el-button>

 <el-dialog :title="$t('Save')">

第二步：在vue的主文件入口main.js里引入i18n，并注入到vue中

import i18n from './locales';
。。。。。。
。。。。。
new Vue({
  el: '#app',
  store,
  router: routerConfig,
  i18n,
  render: h => h(App)
})

第三步：改变语言事件

handleSetLanguage(lang) {
      window.sessionStorage.setItem('lang', lang); // 切换多语言
      this.$i18n.locale = lang;
      location.reload(); // 为了重新实例化vue-router对象，避免一些bug
    },

大概就是这样。