单独使用i18n
1.安装依赖 yarn add vue-i18n@8.22.2
2.在src下创建lang文件夹，创建lib文件夹，lib下面放下面两个文件
en.js
export default {
common: {
inputText: 'Please input',
selectText: 'Please select',
startTimeText: 'Start time',
endTimeText: 'End time',
login: 'Login',
required: 'This is required',
loginOut: 'Login out',
document: 'Document',
reminder: 'Reminder',
loginOutMessage: 'Exit the system?',
back: 'Back',
ok: 'OK',
cancel: 'Cancel',
reload: 'Reload current',
closeTab: 'Close current',
closeTheLeftTab: 'Close left',
closeTheRightTab: 'Close right',
closeOther: 'Close other',
closeAll: 'Close all',
prevLabel: 'Prev',
nextLabel: 'Next',
skipLabel: 'Jump',
doneLabel: 'End',
menu: 'Menu',
menuDes: 'Menu bar rendered in routed structure',
collapse: 'Collapse',
collapseDes: 'Expand and zoom the menu bar',
tagsView: 'Tags view',
tagsViewDes: 'Used to record routing history',
tool: 'Tool',
toolDes: 'Used to set up custom systems',
query: 'Query',
reset: 'Reset',
shrink: 'Put away',
expand: 'Expand',
delMessage: 'Delete the selected data?',
delWarning: 'Warning',
delOk: 'OK',
delCancel: 'Cancel',
delNoData: 'Please select the data to delete',
delSuccess: 'Deleted successfully'
},
error: {
noPermission: `Sorry, you don't have permission to access this page.`,
pageError: 'Sorry, the page you visited does not exist.',
networkError: 'Sorry, the server reported an error.',
returnToHome: 'Return to home'
},
setting: {
projectSetting: 'Project setting',
theme: 'Theme',
layout: 'Layout',
systemTheme: 'System theme',
menuTheme: 'Menu theme',
interfaceDisplay: 'Interface display',
breadcrumb: 'Breadcrumb',
breadcrumbIcon: 'Breadcrumb icon',
collapseMenu: 'Collapse menu',
hamburgerIcon: 'Hamburger icon',
screenfullIcon: 'Screenfull icon',
sizeIcon: 'Size icon',
localeIcon: 'Locale icon',
tagsView: 'Tags view',
logo: 'Logo',
greyMode: 'Grey mode',
fixedHeader: 'Fixed header',
headerTheme: 'Header theme',
cutMenu: 'Cut Menu',
copy: 'Copy',
clearAndReset: 'Clear cache and reset',
copySuccess: 'Copy success',
copyFailed: 'Copy failed',
footer: 'Footer',
uniqueOpened: 'Unique opened',
tagsViewIcon: 'Tags view icon',
dynamicRouter: 'Dynamic router',
reExperienced: 'Please exit the login experience again',
fixedMenu: 'Fixed menu'
},
size: {
default: 'Default',
large: 'Large',
small: 'Small'
},
login: {
welcome: 'Welcome to the system',
message: 'Backstage management system',
username: 'Username',
password: 'Password',
register: 'Register',
checkPassword: 'Confirm password',
login: 'Sign in',
otherLogin: 'Sign in with',
remember: 'Remember me',
hasUser: 'Existing account? Go to login',
forgetPassword: 'Forget password',
usernamePlaceholder: 'Please input username',
passwordPlaceholder: 'Please input password',
code: 'Verification code',
codePlaceholder: 'Please input verification code'
},
router: {
login: 'Login',
dashboard: 'Dashboard',
workplace: 'Workplace',
errorPage: 'Error page'
},
permission: {
hasPermission: 'Please set the operation permission value'
}
}
zh.js
export default {
common: {
inputText: '请输入',
selectText: '请选择',
startTimeText: '开始时间',
endTimeText: '结束时间',
login: '登录',
required: '该项为必填项',
loginOut: '退出系统',
document: '项目文档',
reminder: '温馨提示',
loginOutMessage: '是否退出本系统？',
back: '返回',
ok: '确定',
cancel: '取消',
reload: '重新加载',
closeTab: '关闭标签页',
closeTheLeftTab: '关闭左侧标签页',
closeTheRightTab: '关闭右侧标签页',
closeOther: '关闭其他标签页',
closeAll: '关闭全部标签页',
prevLabel: '上一步',
nextLabel: '下一步',
skipLabel: '跳过',
doneLabel: '结束',
menu: '菜单',
menuDes: '以路由的结构渲染的菜单栏',
collapse: '展开缩收',
collapseDes: '展开和缩放菜单栏',
tagsView: '标签页',
tagsViewDes: '用于记录路由历史记录',
tool: '工具',
toolDes: '用于设置定制系统',
query: '查询',
reset: '重置',
shrink: '收起',
expand: '展开',
delMessage: '是否删除所选中数据？',
delWarning: '提示',
delOk: '确定',
delCancel: '取消',
delNoData: '请选择需要删除的数据',
delSuccess: '删除成功'
},
error: {
noPermission: `抱歉，您无权访问此页面。`,
pageError: '抱歉，您访问的页面不存在。',
networkError: '抱歉，服务器报告错误。',
returnToHome: '返回首页'
},
setting: {
projectSetting: '项目配置',
theme: '主题',
layout: '布局',
systemTheme: '系统主题',
menuTheme: '菜单主题',
interfaceDisplay: '界面显示',
breadcrumb: '面包屑',
breadcrumbIcon: '面包屑图标',
collapseMenu: '折叠菜单',
hamburgerIcon: '折叠图标',
screenfullIcon: '全屏图标',
sizeIcon: '尺寸图标',
localeIcon: '多语言图标',
tagsView: '标签页',
logo: '标志',
greyMode: '灰色模式',
fixedHeader: '固定头部',
headerTheme: '头部主题',
cutMenu: '切割菜单',
copy: '拷贝',
clearAndReset: '清除缓存并且重置',
copySuccess: '拷贝成功',
copyFailed: '拷贝失败',
footer: '页脚',
uniqueOpened: '菜单手风琴',
tagsViewIcon: '标签页图标',
dynamicRouter: '动态路由',
reExperienced: '请重新退出登录体验',
fixedMenu: '固定菜单'
},
size: {
default: '默认',
large: '大',
small: '小'
},
login: {
welcome: '欢迎使用本系统',
message: '开箱即用的中后台管理系统',
username: '用户名',
password: '密码',
register: '注册',
checkPassword: '确认密码',
login: '登录',
otherLogin: '其他登录方式',
remember: '记住我',
hasUser: '已有账号？去登录',
forgetPassword: '忘记密码',
usernamePlaceholder: '请输入用户名',
passwordPlaceholder: '请输入密码',
code: '验证码',
codePlaceholder: '请输入验证码'
},
router: {
login: '登录',
dashboard: '首页',
workplace: '工作台',
errorPage: '错误页面'
},
permission: {
hasPermission: '请设置操作权限值'
}
}
在src下的lang文件夹的index中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//导入语言包内容
import enLocale from './lib/en'
import zhLocale from './lib/zh'
//实例化i18n对象
let i18n =new VueI18n({
//设置语言包类型
locale:"en",
//语言包信息
messages:{
zh:{...zhLocale,},
en:{...enLocale,},
}
})
//暴露出去
export default i18n在main.js中
Vue.use(ElementUI, { locale })
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
<template>
<div id="app">
<router-view />
<!-- {{$t('route.dashboard')}} -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>结合element-ui 使用
需要在main.js修改一下内容文章来源：https://www.toymoban.com/news/detail-507656.html
// set ElementUI lang to EN
// 安装element-ui并配置英文语言包
// Vue.use(ElementUI, { locale })
Vue.use(ElementUI, {
i18n:(key,value)=>i18n.t(key,value)
})在src下的lang文件夹下的index文件中文章来源地址https://www.toymoban.com/news/detail-507656.html
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//导入语言包内容
import enLocale from './lib/en'
import zhLocale from './lib/zh'
//导入element-ui 的语言包
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
//实例化i18n对象
let i18n =new VueI18n({
//设置语言包类型
locale:"en",
//语言包信息
messages:{
zh:{...zhLocale,...elementZhLocale},
en:{...enLocale,...elementEnLocale},
}
})
//暴露出去
export default i18n到了这里，关于语言包 I18n 使用（如何搭配element-ui）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
