一. 多语言支持

  1.           实现elementUI中英文切换功能，感受中文切换的效果

1. 安装

  1. npm i vue-i18n@8.22.2

2. ElementUI多语言配置

  1.                      **引入element语言包文件  src/lang/index.js     直接粘贴复制到项目下面**
  1. // 进行多语言支持配置
  2. import Vue from 'vue' // 引入Vue
  3. import VueI18n from 'vue-i18n' // 引入国际化的插件包
  4. import locale from 'element-ui/lib/locale'
  5. import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
  6. import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
  7. Vue.use(VueI18n) // 全局注册国际化包
  9. // 创建国际化插件的实例
  10. const i18n = new VueI18n({
  11.   // 指定语言类型 zh表示中文  en表示英文
  12.   locale: 'zh',
  13.   // 将elementUI语言包加入到插件语言数据里
  14.   messages: {
  15.     // 英文环境下的语言数据
  16.     en: {
  17.       ...elementEN
  18.     },
  19.     // 中文环境下的语言数据
  20.     zh: {
  21.       ...elementZH
  22.     }
  23.   }
  24. })
  25. // 配置elementUI 语言转换关系
  26. locale.i18n((key, value) => i18n.t(key, value))
  28. export default i18n


3. 在main.js中挂载i18n的插件

  1. // 省略其他...
  2. import i18n from '@/lang'　　／／设置一次，在其他项目也可以继续使用
  3. // 加入到根实例配置项中
  4. new Vue({
  5.   el: '#app',
  6.   router,
  7.   store,
  8.   i18n, // 
  9.   render: h => h(App)
  10. })


　４．核心: 手动修改 locale 属性 ,改成zh 或者 en

二. 如何自定义内容多语言配置

  1.     我们通过配置让ElementUI组件库内部支持了多语言配置，那我们自定义的内容部分:也就是没有使用elementUI的部分该如何实现多语言呢？

　 1. 引入自定义语言配置文件

  1.  　　   (因为这是做后台管理系统的,所以里面的配置文字跟后台管理匹配)

src/lang/zh.js (中文)

  1. export default {
  2.   route: {
  3.     dashboard: '首页',
  4.     manage: '后台管理',
  5.     users: '用户管理',
  6.     menus: '菜单管理',
  7.     logs: '日志管理',
  8.     example: '示例',
  9.     table: '数据列表',
  10.     // permissions: '权限管理',
  11.     // employees: '员工',
  12.     // employeesList: '员工管理',
  13.     // employeesInfo: '个人信息',
  14.     postInfo: '岗位信息',
  15.     manageSelf: '经理自助',
  16.     setting: '设置',
  17.     report: '报表',
  18.     employeesAdd: '添加员工',
  19.     EditiNfo: '编辑信息',
  20.     print: '打印页面',
  21.     form: '表单页',
  22.     basicForm: '基础表单',
  23.     stepForm: '分步表单',
  24.     advancedList: '高级表单',
  25.     step: '步骤',
  26.     details: '详情页',
  27.     BasicsDetails: '基础详情页',
  28.     seniorDetails: '高级详情页',
  29.     import: '导入',
  30.     // 注册
  31.     register: '人资-注册',
  32.     login: '人资-登录',
  33.     // 审批
  34.     approvals: '审批', // 审批
  35.     salaryApproval: '工资审核',
  36.     enterApproval: '入职审核',
  37.     leaveApproval: '申请请假',
  38.     quitApproval: '申请离职',
  39.     overtimeApproval: '加班申请',
  40.     securitySetting: '审批设置',
  41.     // 员工
  42.     employees: '员工',
  43.     employeesList: '员工列表',
  44.     employeesInfo: '个人信息',
  45.     employeesAdjust: '调岗',
  46.     employeesLeave: '离职',
  47.     employeesPrint: '打印',
  49.     // 工资
  50.     salarys: '工资',
  51.     salarysList: '工资列表',
  52.     salarysSetting: '工资设置',
  53.     salarysDetails: '工资详情',
  54.     salarysHistorical: '历史归档',
  55.     salarysMonthStatement: '月报表',
  56.     // 社保
  57.     'social_securitys': '社保',
  58.     socialSecuritys: '社保管理',
  59.     socialDetail: '详情',
  60.     socialHistorical: '历史归档',
  61.     socialMonthStatement: '当月报表',
  62.     // 组织架构
  63.     departments: '组织架构',
  64.     'departments-import': '引入',
  65.     // 公司
  66.     settings: '公司设置',
  67.     // 考勤
  68.     attendances: '考勤',
  69.     usersApprovals: '用户审批',
  70.     // saas企业
  71.     'saas-clients': '企业',
  72.     'saas-clients-details': '企业详情',
  73.     // 权限
  74.     'permissions': '权限管理' // 权限管理
  75.   },
  76.   navbar: {
  77.     search: '站内搜索',
  78.     logOut: '退出登录',
  79.     dashboard: '首页',
  80.     github: '项目地址',
  81.     screenfull: '全屏',
  82.     theme: '换肤',
  83.     lang: '多语言',
  84.     error: '错误日志',
  85.     companyName: '江苏传智播客教育科技股份有限公司'
  86.   },
  87.   login: {
  88.     title: '人力资源管理系统',
  89.     login: '登录',
  90.     username: '账号',
  91.     password: '密码',
  92.     any: '随便填',
  93.     thirdparty: '第三方登录',
  94.     thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
  95.   },
  96.   tagsView: {
  97.     close: '关闭',
  98.     closeOthers: '关闭其它',
  99.     closeAll: '关闭所有',
  100.     refresh: '刷新'
  101.   },
  102.   table: {
  103.     title: '请输入用户',
  104.     search: '搜索',
  105.     add: '添加',
  106.     addUser: '新增用户',
  107.     id: '序号',
  109.     email: '邮箱',
  110.     phone: '手机',
  111.     name: '姓名',
  112.     entryTime: '入职时间',
  113.     hireForm: '聘用形式',
  114.     jobNumber: '工号',
  115.     department: '部门',
  116.     managementForm: '管理形式',
  117.     city: '工作城市',
  118.     turnPositiveTime: '转正时间',
  120.     permissionNew: '新增权限组',
  121.     permissionUser: '权限组名称',
  122.     imdsAi: '高级接口授权',
  123.     avatar: '头像',
  124.     introduction: '介绍',
  125.     paddword: '密码',
  126.     powerCode: '权限代码',
  127.     powerDistriB: '权限分配',
  128.     powerTitle: '权限标题',
  129.     powerNav: '主导航',
  130.     actions: '操作',
  131.     edit: '编辑',
  132.     delete: '删除',
  133.     cancel: '取 消',
  134.     confirm: '确 定',
  135.     return: '返回',
  136.     operationType: '操作类型',
  137.     operationDate: '操作时间',
  138.     date: '日期',
  139.     submit: '提交',
  140.     operator: '操作人',
  141.     results: '执行结果',
  142.     describe: '描述',
  143.     save: '保存',
  144.     signOut: '退出',
  145.     reset: '重置',
  146.     know: '我知道了',
  147.     view: '查看'
  149.   }
  150. }

src/lang/en.js (英文)

  1. export default {
  2.   route: {
  3.     dashboard: 'Dashboard',
  4.     manage: 'manage',
  5.     users: 'users',
  6.     menus: 'menus',
  7.     // permissions: 'permissions',
  8.     logs: 'logs',
  9.     example: 'example',
  10.     table: 'table',
  12.     postInfo: 'Job information',
  13.     manageSelf: 'Manager self-help',
  14.     setting: 'setting',
  15.     report: 'report',
  16.     employeesAdd: 'add employees',
  17.     EditiNfo: 'Edit information',
  18.     print: 'print',
  20.     form: 'form',
  21.     basicForm: 'basic form',
  22.     stepForm: 'step form',
  23.     advancedList: 'advanced form',
  24.     step: 'step',
  26.     details: 'details',
  27.     BasicsDetails: 'Basic details page',
  28.     seniorDetails: 'Advanced details page',
  29.     import: 'Import',
  30.     register: 'HRM-Register',
  32.     // 登录
  33.     login: 'HRM-Login',
  34.     // 审批
  35.     approvals: 'Approvals', // 审批
  36.     salaryApproval: 'Salary-Approval',
  37.     enterApproval: 'Enter-Approval',
  38.     leaveApproval: 'Leave-Approval',
  39.     quitApproval: 'Quit-Approval',
  40.     overtimeApproval: 'Overtime-Approval',
  41.     securitySetting: 'Security-Setting',
  42.     // 员工
  43.     employees: 'Employees',
  44.     employeesList: 'Employees-List',
  45.     employeesInfo: 'Employees-Info',
  46.     employeesAdjust: 'Employees-Adjust',
  47.     employeesLeave: 'Employees-Leave',
  48.     employeesPrint: 'Employees-Print',
  49.     // 工资
  50.     salarys: 'salarys',
  51.     salarysList: 'Salarys-List',
  52.     salarysSetting: 'Salarys-Setting',
  53.     salarysDetails: 'Salarys-Details',
  54.     salarysHistorical: 'Salarys-Historical',
  55.     salarysMonthStatement: 'Salarys-Month',
  56.     // 社保
  57.     'social_securitys': 'Social',
  58.     socialSecuritys: 'Social-Securitys',
  59.     socialDetail: 'Social-Detail',
  60.     socialHistorical: 'Social-Historical',
  61.     socialMonthStatement: 'Social-Month',
  62.     // 组织架构
  63.     departments: 'departments',
  64.     'departments-import': 'import',
  66.     // 公司
  67.     settings: 'Company-Settings',
  68.     // 考勤
  69.     attendances: 'Attendances',
  70.     // 用户审批
  71.     usersApprovals: 'Users-Approvals',
  72.     // 企业
  73.     'saas-clients': 'Saas-Clients',
  74.     'saas-clients-details': 'Saas-Details',
  75.     'permissions': 'permissions' // 权限管理
  77.   },
  78.   navbar: {
  79.     search: 'search',
  80.     logOut: 'Log Out',
  81.     dashboard: 'Dashboard',
  82.     github: 'Github',
  83.     screenfull: 'screenfull',
  84.     theme: 'theme',
  85.     lang: 'i18n',
  86.     error: 'error log',
  87.     companyName: 'Jiangsu Chuanzhi podcast Education Technology Co., Ltd'
  88.   },
  89.   login: {
  90.     title: 'itheima login',
  91.     login: 'Log in',
  92.     name: 'name',
  93.     entryTime: 'entry time',
  94.     hireForm: 'hire form',
  95.     jobNumber: 'job number',
  96.     department: 'department',
  97.     managementForm: 'management form',
  98.     city: 'city',
  99.     turnPositiveTime: 'turn positive time',
  101.     password: 'Password',
  102.     any: 'any',
  103.     thirdparty: 'Third',
  104.     thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
  105.   },
  106.   tagsView: {
  107.     close: 'Close',
  108.     closeOthers: 'Close Others',
  109.     closeAll: 'Close All',
  110.     refresh: 'refresh'
  112.   },
  113.   table: {
  114.     title: 'Title',
  115.     search: 'Search',
  116.     add: 'add',
  117.     addUser: 'addUser',
  118.     id: 'ID',
  119.     email: 'Email',
  120.     phone: 'Phone',
  121.     username: 'User',
  122.     permissionNew: 'permissionNew',
  123.     permissionUser: 'Permission',
  124.     imdsAi: 'Advanced interface authorization',
  125.     avatar: 'Avatar',
  126.     introduction: 'Introduction',
  127.     paddword: 'paddWord',
  128.     powerCode: 'Permission code',
  129.     powerTitle: 'Permission title',
  130.     actions: 'Actions',
  131.     edit: 'Edit',
  132.     delete: 'Delete',
  133.     cancel: 'Cancel',
  134.     confirm: 'Confirm',
  135.     operationType: 'operationType',
  136.     operationDate: 'operationDate',
  137.     date: 'Date',
  138.     operator: 'operator',
  139.     results: 'results of enforcement',
  140.     describe: 'Pedagogical operation',
  141.     save: 'save',
  142.     signOut: 'sign out',
  143.     submit: 'submit',
  144.     reset: 'reset',
  145.     know: 'I Know',
  146.     return: 'return',
  147.     view: 'view'
  149.   }
  150. }

2. 配置

在上一个小结里面的 src/lang/index.js

  1. import Vue from 'vue'
  2. import VueI18n from 'vue-i18n'
  3. import elementEN from 'element-ui/lib/locale/lang/en'
  4. import elementZH from 'element-ui/lib/locale/lang/zh-CN'
  5. // 引入自定义中文包
  6. + import customZH from './zh' 
  7. // 引入自定义英文包
  8. + import customEN from './en' 
  10. Vue.use(VueI18n)
  12. // 创建国际化插件的实例
  13. export default new VueI18n({
  14.   // 指定语言类型
  15.   locale: 'zh',
  16.   messages: {
  17.     en: {
  18.       ...elementEN, // 将饿了么的英文语言包引入
  19. +     ...customEN   // 将自定义英文包加入
  20.     },
  21.     zh: {
  22.       ...elementZH, // 将饿了么的中文语言包引入
  23. +     ...customZH   // 将自定义中文包加入
  24.     }
  25.   }
  26. })

3. 举个例子:

目标:

  1.            ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625492570770-762cc832-70fd-4146-996f-a25bb2faf333.png#clientId=u589f3e93-776c-4&from=paste&height=116&id=u05e35c00&margin=%5Bobject%20Object%5D&name=image.png&originHeight=116&originWidth=469&originalType=binary&ratio=1&size=19889&status=done&style=none&taskId=u22e68bf9-da21-485f-ad86-6ec92e62fbf&width=469)

1. 准备两套翻译文案

在en.js和zh.中分别设置companyName

  1.                       ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625492638707-ba009154-73de-419b-aad2-191ddec22ec5.png#clientId=u589f3e93-776c-4&from=paste&height=388&id=u2bcf57d4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=388&originWidth=569&originalType=binary&ratio=1&size=87458&status=done&style=none&taskId=u705a47fb-a1e1-4b15-aeed-7f218cef086&width=569)

2. 修改模板的渲染

用 $t(‘属性名’) 来生成标题。这里的$t是引入了i18n之后，自动挂载在vue实例上的功能。

  1. <div class="app-breadcrumb">
  2.   {{ $t('navbar.companyName') }}
  3.   <span class="breadBtn">体验版</span>
  4. </div>

3. 手动将locale进行 en和zh切换查看效果

  1.               在  src/lang/index.js  下面
  1. export default new VueI18n({
  2.   // 切换这里试试 en
  3.   locale: 'zh'
  4.   ...
  5. })

三: 实现动态切换中英文

背景：现在我们虽然已经实现了中英文切换的核心逻辑，但是是死的，不能动态切换

目标: 　点击中英文按钮，弹出下拉框，当我们点击中文和en的时候可以实现动态的切换当前的语言

思路:　点击下拉框时把当前选择的语言赋值给this.$i18n.locale属性即可

　　　　　　　　　　　image.png

　　１．封装多语言组件

　　　　　在放置公共组件的位置： src/components/Lang/index.vue

　　

  1. <template>
  2.   <el-dropdown trigger="click" @command="changeLanguage">
  3.     <div>
  4.       <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
  5.     </div>
  6.     <el-dropdown-menu slot="dropdown">
  7.       <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
  8.       <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
  9.     </el-dropdown-menu>
  10.   </el-dropdown>
  11. </template>
  13. <script>
  14. export default {
  15.   methods: {
  16.     changeLanguage(lang) {
  17.       this.$i18n.locale = lang // 设置给本地的i18n插件
  18.       this.$message.success('切换多语言成功')
  19.     }
  20.   }
  21. }
  22. </script>

　　　　　　　　　　　　　　　
　注意：icon-class=”language” 需要在src\icons\svg\下有一个名为language.svg的文件。

　２．全局注册

　　　　　　　在component/index.js中进行全局组件注册 　　　　　

  1. import Lang from './Lang'
  2. export default {
  3.   // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
  4.   install(Vue) {
  5.     // 进行组件的全局注册
  6.     Vue.component('Lang', Lang)
  7.   }
  8. }

　　　　　　　

　３．引入并使用组件

  1. <!-- 语言包 -->
  2. <lang class="right-menu-item" />
  3. <!-- 全屏组件 -->
  4. <screen-full class="right-menu-item" />

　　

总结：　

视图代码：{{ $t(‘xx.xxxx’)}}

自动切换：this.$i18n.locale= ‘zh’