一、使用步骤

1.引入切换语言插件i18n

代码如下（示例）：

npm install vue-i18n@^8.1.1//这里我用的版本是 8.1.1 用的5.0.3 提示vue-cli版本不正确？？

2.新建一个lang文件夹里面存放我们的语言翻译表

为什么要对照表，原来element自带的只能翻译他们自己的语句，我们自己的比如日志查询是没有的。

module.exports = {language: {text: '中文简体'}}//中文对照表

module.exports = {language: {text: 'English'}}//英文对照表

新建lang下的index.js文件

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

在main.js

import i18n from '@/lang'// Vue.use(ElementUI，{locel}) //原来是这样注掉因为默认是中文，我们要修改Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)})// 后面接受一个方法. 给i18n传入对应的数据（组件库的）要修改样式的语言

<p>{{$t(`language.text`)}}</p>//在组件可以这么使用。传入对应的字段就会翻译对应的语言

这样页面其实已经完成了但是我们还没做点击切换语言

在组件中我们可以定义一个方法（此处省略不掩演示）

methods: {changeLanguage(lang) {//接受参数。是上方lang文件设置的。message zh还是enwindow.sessionStorage.setItem('lang'，lang） // 切换多语言this.$i18n.locale = lang // 设置给本地的i18n插件this.$message.success('切换多语言成功')}}