先说个更新elementui的方法： 

npm uninstall element-ui 卸载掉当前版本

npm install element-ui@2.8.2 -S 安装你想要的版本，注意：element-ui@2.8.2是一项，中间没有空格

最后在main.js中把default修改为theme-chalk

// import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'
记录下elementui更新版本后vue项目在谷歌浏览器加载卡死的问题：

vue项目的elementui从2.3.4更新到2.13.1版本，项目卡死，浏览器打不开来，然后考虑可能是版本的兼容问题，经测从2.3.4-2.6.3没有问题，2.6.3-2.13.1都会卡死，可能是vue某个版本与elementui版本不兼容，但我新开vue-cli项目进行测试，安装2.5.10版本vue和2.13.1版本elementui，并且使用tabs，不用tabs包裹，都没有出现卡死现象，那也许是项目中某一个东西与elementui不兼容，有知道的小伙伴希望留言指教下，谢谢。

要实现elementui的多语言切换有两种方法

第一种方法：根据自己需要加载语言包（并不是页面的手动切换）

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 引入elementui样式
// import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n elementui语言包（非手动切换）
import locale from 'element-ui/lib/locale/lang/en' // lang i18n elementui语言包(英文包)
Vue.use(ElementUI, { locale, size: 'small' }) // 设置elementui默认x小尺寸

这种就是想要自己的页面的elementui组件是什么语言，就引入什么语言包，然后使用即可，不引入的话就默认使用中文包，比较简单。

第二种：使用i18n手动切换多语言

首先我们创建三个文件：index.js(引入和使用i18n模块)、en.js（英文包）、zh.js（中文包），如果还有其他语言，则再新增其他语言包

index.js文件：

import Vue from 'vue' // 引入vue
import VueI18n from 'vue-i18n' // 引入i18n模块
import Cookies from 'js-cookie' // 封装了获取，设置，删除cookie的方法
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui中文包
import locale from 'element-ui/lib/locale' // 引入elementuiui语言包模块
import enLocale from './en' // 本地英文包
import zhLocale from './zh' // 本地中文包

Vue.use(VueI18n) // vue使用i18n模块
// 引入本地
const messages = {
  en: {
    ...enLocale, // es6的拓展运算符，相当于解析出每个对象
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 创建国际化实例
const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', // set locale，默认中文
  messages // set locale messages。语言包
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

en.js文件：

export default {
message：{
 title: 'hello',
 theme: 'Theme'
},
skin: {
    Blue: 'Blue',
    Green: 'Green'
  }
}

zh.js文件：

export default {
message：{
 title: '你好',
 theme: '主题'
},
skin: {
    Blue: '蓝色',
    Green: '绿色'
  }
}

然后main.js中使用编写的i18n模块的index.js文件

import i18n from './lang'
new Vue({
  el: '#app',
  router,
  store, // 把store注入到每个子组件实例，而不用每个子组件都Vue.use(Vuex)，用this.$store访问
  i18n,
  render: h => h(App)
})

选择切换语言模块：

<template>
  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
      <!--<el-tooltip class="item" effect="dark" content="select language" placement="left-start">-->
      	<!--不能包裹el-tooltip,会报错-->
      	<div>
        <!-- 语言选择图标 -->
        <nx-svg-icon class-name='international-icon' icon-class="language" />
        </div>
      <!--</el-tooltip>-->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import nxSvgIcon from '@/components/nx-svg-icon/index'
export default {
  name: 'nx-lang-select',
  components: { nxSvgIcon },
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      // 选择语言
      this.$i18n.locale = lang
      // 保存vuex
      this.$store.dispatch('setLanguage', lang)
      this.$message({
        message: 'switch language success',
        type: 'success'
      })
      // 触发重新加载事件
      this.$emit('handerevent')
    }
  }
}
</script>

<style scoped>
.international-icon {
  font-size: 22px;
  cursor: pointer;
  vertical-align: -5px!important;
  color:#fff;
}
.el-dropdown{
  color:#5a5e66;
}
</style>

配置和选择语言的模块弄好后就可以使用了：

//作为文本内容,绑定在标签中
<div class="manage_tip">
    <span class="title">{{$t('message.title')}}</span>
 </div>

//作为属性绑定
  <el-form-item :label="$t('message.uname')" prop="pnone">
        <el-input v-model="loginUser.pnone" placeholder="请输入手机或邮箱"></el-input>
 </el-form-item>

//作为elementui 中的校验规则,要放在computed中
 computed: {
    rules() {
      return {
        password: [
          {
            required: true,
            message: this.$t("message.password"),
            trigger: "blur"
          },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/,
            message: "输入6-16位包含数字、字母、特殊字符的密码",
            trigger: "blur"
          }
        ],
      };
    }
  },

// 用于elemenui表单自定义检验中

<template>
 <div></div>
</template>
 <script>
  export default{
    data() {
      // 用户名自定义验证规则
    const validateUsername = (rule, value, callback) => {
      // 国际化处理
      if (value === '') {
        callback(new Error(this.$t('login.user.userPlaceholder')))
      } else {
        console.log('user', value)
        callback()
      }
    return {   }
    }
}
</script>