**目标**实现国际化语言切换
初始化多语言包
本项目使用国际化 i18n 方案。通过 vue-i18n而实现。
第一步,我们需要首先国际化的包
$ npm i vue-i18n
第二步,需要单独一个多语言的实例化文件 src/lang/index.js
import Vue from 'vue'// 引入Vue
import VueI18n from 'vue-i18n'// 引入国际化的包
import Cookie from 'js-cookie'// 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en'// 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN'// 引入饿了么的中文包
Vue.use(VueI18n)// 全局注册国际化包
export default new VueI18n({
locale:Cookie.get('language')||'zh',// 从cookie中获取语言类型 获取不到就是中文
messages:{
en:{...elementEN // 将饿了么的英文语言包引入},
zh:{...elementZH // 将饿了么的中文语言包引入}}})
上面的代码的作用是将Element的两种语言导入了
第三步,在main.js中对挂载 i18n的插件,并设置element为当前的语言
// 设置element为当前的语言Vue.use(ElementUI,{i18n:(key, value)=> i18n.t(key, value)})newVue({
el:'#app',
router,
store,
i18n,render:h=>h(App)
})
引入自定义语言包
此时,element已经变成了zh,也就是中文,但是我们常规的内容怎么根据当前语言类型显示?
这里,针对英文和中文,我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js
该语言包,我们已经在资源中提供
第四步,在index.js中同样引入该语言包
import customZH from'./zh'// 引入自定义中文包importcustomENfrom'./en'// 引入自定义英文包Vue.use(VueI18n)// 全局注册国际化包exportdefaultnewVueI18n({
locale:Cookie.get('language')||'zh',// 从cookie中获取语言类型 获取不到就是中文
messages:{
en:{...elementEN,// 将饿了么的英文语言包引入...customEN
},
zh:{...elementZH,// 将饿了么的中文语言包引入...customZH
}
}
})
在左侧菜单中应用多语言包
自定义语言包的内容怎么使用?
第五步,在左侧菜单应用
当我们全局注册i18n的时候,每个组件都会拥有一个**$t**的方法,它会根据传入的key,自动的去寻找当前语言的文本,我们可以将左侧菜单变成多语言展示文本
layout/components/SidebarItem.vue
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t('route.'+onlyOneChild.name)" />
注意:当文本的值为嵌套时,可以通过**$t(key1.key2.key3...)**的方式获取
现在,我们已经完成了多语言的接入,现在封装切换多语言的组件
封装多语言插件
第六步,封装多语言组件 src/components/lang/index.vue
<template>
<el-dropdown trigger="click" @command="changeLanguage">
<!-- 这里必须加一个div -->
<div>
<svg-icon style="color:#fff;font-size:20px" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import Cookie from 'js-cookie'
export default {
methods: {
changeLanguage(lang) {
Cookie.set('language', lang) // 切换多语言
this.$i18n.locale = lang // 设置给本地的i18n插件
this.$message.success('切换多语言成功')
}
}
}
</script>
第七步,在Navbar组件中引入
<!-- 放置切换多语言 -->
<lang class="right-menu-item" />
<!-- 放置主题 -->
<theme-picker class="right-menu-item" />
<!-- 放置全屏插件 -->
<screen-full class="right-menu-item" />
多语言文件
en
export default {
route: {
dashboard: 'Dashboard',
manage: 'manage',
users: 'users',
menus: 'menus',
// permissions: 'permissions',
logs: 'logs',
example: 'example',
table: 'table',
postInfo: 'Job information',
manageSelf: 'Manager self-help',
setting: 'setting',
report: 'report',
employees: 'add employees',
EditiNfo: 'Edit information',
print: 'print',
form: 'form',
basicForm: 'basic form',
stepForm: 'step form',
advancedList: 'advanced form',
step: 'step',
details: 'details',
BasicsDetails: 'Basic details page',
seniorDetails: 'Advanced details page',
import: 'Import',
register: 'HRM-Register',
// 登录
login: 'HRM-Login',
// 审批
approvals: 'Approvals', // 审批
salaryApproval: 'Salary-Approval',
enterApproval: 'Enter-Approval',
leaveApproval: 'Leave-Approval',
quitApproval: 'Quit-Approval',
overtimeApproval: 'Overtime-Approval',
securitySetting: 'Security-Setting',
// 员工
employees: 'Employees',
employeesList: 'Employees-List',
employeesInfo: 'Employees-Info',
employeesAdjust: 'Employees-Adjust',
employeesLeave: 'Employees-Leave',
employeesPrint: 'Employees-Print',
// 工资
salarys: 'salarys',
salarysList: 'Salarys-List',
salarysSetting: 'Salarys-Setting',
salarysDetails: 'Salarys-Details',
salarysHistorical: 'Salarys-Historical',
salarysMonthStatement: 'Salarys-Month',
// 社保
'social_securitys': 'Social',
socialSecuritys: 'Social-Securitys',
socialDetail: 'Social-Detail',
socialHistorical: 'Social-Historical',
socialMonthStatement: 'Social-Month',
// 组织架构
departments: 'departments',
'departments-import': 'import',
// 公司
settings: 'Company-Settings',
// 考勤
attendances: 'Attendances',
// 用户审批
usersApprovals: 'Users-Approvals',
// 企业
'saas-clients': 'Saas-Clients',
'saas-clients-details': 'Saas-Details',
'permissions': 'permissions' // 权限管理
},
navbar: {
search: 'search',
logOut: 'Log Out',
dashboard: 'Dashboard',
github: 'Github',
screenfull: 'screenfull',
theme: 'theme',
lang: 'i18n',
error: 'error log'
},
login: {
title: 'itheima login',
login: 'Log in',
name: 'name',
entryTime: 'entry time',
hireForm: 'hire form',
jobNumber: 'job number',
department: 'department',
managementForm: 'management form',
city: 'city',
turnPositiveTime: 'turn positive time',
password: 'Password',
any: 'any',
thirdparty: 'Third',
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
},
tagsView: {
close: 'Close',
closeOthers: 'Close Others',
closeAll: 'Close All',
refresh: 'refresh'
},
table: {
title: 'Title',
search: 'Search',
add: 'add',
addUser: 'addUser',
id: 'ID',
email: 'Email',
phone: 'Phone',
username: 'User',
permissionNew: 'permissionNew',
permissionUser: 'Permission',
imdsAi: 'Advanced interface authorization',
avatar: 'Avatar',
introduction: 'Introduction',
paddword: 'paddWord',
powerCode: 'Permission code',
powerTitle: 'Permission title',
actions: 'Actions',
edit: 'Edit',
delete: 'Delete',
cancel: 'Cancel',
confirm: 'Confirm',
operationType: 'operationType',
operationDate: 'operationDate',
date: 'Date',
operator: 'operator',
results: 'results of enforcement',
describe: 'Pedagogical operation',
save: 'save',
signOut: 'sign out',
submit: 'submit',
reset: 'reset',
know: 'I Know',
return: 'return',
view: 'view'
}
}
中文
// 引入Vue
import Vue from "vue";
// 引入国际化的包
import VueI18n from "vue-i18n";
// 引入cookie包
import Cookie from "js-cookie";
// 引入饿了么的英文包
import elementEN from "element-ui/lib/locale/lang/en";
// 引入饿了么的中文包
import elementZH from "element-ui/lib/locale/lang/zh-CN";
// 引入自定义中文包
import customZH from "./zh";
// 引入自定义英文包
import customEN from "./en";
// 全局注册国际化包
Vue.use(VueI18n);
export default new VueI18n({
// 从cookie中获取语言类型 获取不到就是中文
locale: Cookie.get("language") || "zh",
messages: {
en: {
// 将饿了么的英文语言包引入
...elementEN,
...customEN,
},
zh: {
// 将饿了么的中文语言包引入
...elementZH,
...customZH,
},
},
});