成品效果

首先引入i18n(vue-i18n官网文档) 依赖包

npm install vue-i18n@8

然后单独在src目录下新建一个文件夹lang，存放相对应的变量名称，我这里只做显示中文所以其他引入我都注释了，具体目录如下：

src\lang/zh.js部分代码

export default {route: {riskDetail: '列表库管理',bdTaskRisk: '列表1',bdRepairOrder: '列表2',pdTaskRisk: '列表3',pdRepairOrder: '列表4',sdTaskRisk: '列表5',sdRepairOrder: '列表6',zlTaskRisk: '列表7',zlRepairOrder: '列表8',jobControlCard: '列表9',},navbar: {dashboard: '首页',github: '项目地址',logOut: '退出登录',profile: '个人中心',theme: '换肤',size: '布局大小'},login: {title: '系统登录',logIn: '登录',tenant: '租户',username: '账号',password: '密码',any: '随便填',thirdparty: '第三方登录',thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'},documentation: {documentation: '文档',github: 'Github 地址'},permission: {addRole: '新增角色',editPermission: '编辑权限',roles: '你的权限',switchRoles: '切换权限',tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',delete: '删除',confirm: '确定',cancel: '取消'},guide: {description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',button: '打开引导'},components: {documentation: '文档',tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',stickyTips: '当页面滚动到预设的位置会吸附在顶部',backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'},table: {dynamicTips1: '固定表头, 按照表头顺序排序',dynamicTips2: '不固定表头, 按照点击顺序排序',dragTips1: '默认顺序',dragTips2: '拖拽后顺序',title: '标题',importance: '重要性',type: '类型',remark: '点评',search: '搜索',add: '添加',export: '导出',reviewer: '审核人',id: '序号',date: '时间',author: '作者',readings: '阅读数',status: '状态',actions: '操作',edit: '编辑',publish: '发布',draft: '草稿',delete: '删除',cancel: '取 消',confirm: '确 定'},example: {warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'},errorLog: {tips: '请点击右上角bug小图标',description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',documentation: '文档介绍'},excel: {export: '导出',selectedExport: '导出已选择项',placeholder: '请输入文件名(默认excel-list)'},zip: {export: '导出',placeholder: '请输入文件名(默认file)'},pdf: {tips: '这里使用   window.print() 来实现下载pdf的功能'},theme: {change: '换肤',documentation: '换肤文档',tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'},tagsView: {refresh: '刷新',close: '关闭',closeOthers: '关闭其它',closeAll: '关闭所有'},settings: {title: '系统布局配置',theme: '主题色',tagsView: '开启 Tags-View',fixedHeader: '固定 Header',sidebarLogo: '侧边栏 Logo'}
}

src\lang\index.js

我这里默认设置只显示中文

import Vue from 'vue'
import VueI18n from 'vue-i18n'
//import Cookies from 'js-cookie'
// import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
// import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
// import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
// import enLocale from './en'
import zhLocale from './zh'
// import esLocale from './es'
// import jaLocale from './ja'Vue.use(VueI18n)const messages = {// en: {//   ...enLocale,//   ...elementEnLocale// },zh: {...zhLocale,...elementZhLocale},// es: {//   ...esLocale,//   ...elementEsLocale// },// ja: {//   ...jaLocale,//   ...elementJaLocale// }
}
export function getLanguage() {// const chooseLanguage = Cookies.get('language')//if (chooseLanguage) return chooseLanguage// if has not choose language// const language = (navigator.language || navigator.browserLanguage).toLowerCase()// const locales = Object.keys(messages)// for (const locale of locales) {//   if (language.indexOf(locale) > -1) {//     return locale//   }// }return 'zh' // 默认中文
}
const i18n = new VueI18n({// set locale// options: en | zh | eslocale: getLanguage(),// set locale messagesmessages
})export default i18n

src\main.js

接着要在main.js引入相关依赖

import Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
// import Cookies from 'js-cookie' //这里不用到字体大小切换所以不存cookies切换
import '@/styles/index.scss' // global cssimport App from './App'
import store from './store'
import router from './router'import i18n from './lang' // internationalizationimport '@/icons' // icon
import '@/permission' // permission control/*** If you don't want to use mock-server* you want to use MockJs for mock api* you can execute: mockXHR()** Currently MockJs will be used in the production environment,* please remove it before going online ! ! !*/
if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}// Vue.use(Element, {
//   size: Cookies.get('size') || 'medium', // set element-ui default size
//   i18n: (key, value) => i18n.t(key, value)
// })//重点代码//
Vue.use(Element, {size: 'medium', // set element-ui default size设置元素默认大小i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})Vue.config.productionTip = falsenew Vue({el: '#app',router,store,i18n,render: h => h(App)
})

然后修改src/layout/components/Sidebar/SidebarItem.vue文件

然后修改src\components\Breadcrumb\index.vue文件

这样就完成了，因为需求不需要语言版本切换就所以借默认了zh,我这里只做个人记录所以代码潦草，不喜勿喷哈。