多语言
约 427 字大约 1 分钟
2025-04-23
多语言配置
vue3版本使用 vue-i18n 实现多语言支持,通过 useI18n()
钩子访问翻译功能。
使用方法
- 引入 i18n
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
- 模板中使用
<div>{{ $t('login.title') }}</div>
- vue setup代码中使用
let title = i18n.t('route.dashboard');
- 普通js代码中使用
如果在普通的js(非vue component)代码中使用,需要使用 i18n.global.t
方法。
import i18n from '@/i18n'
let title = i18n.global.t('route.dashboard');
配置说明
界面显示的文本,在 src\i18n\langs\
文件夹中配置,目前支持中文、英文。以 zh-cn.js
为例:
export default {
login: {
title: 'OpenAuth.Net Vue3版',
logIn: '登 录',
username: '账号',
password: '密码',
usernamePlaceholder: '请输入登录账号',
oauthLoginTip: '接口服务器启用了Oauth认证,请点击这里登录',
tips: {
system: '默认System登录后,你可以无法无天',
admin: 'admin/admin登录后,会少一点权限,资源管理/分类管理的字段会少一点',
test: 'test/test登录后,权限会更少,资源管理/分类管理的字段会更少'
}
},
tagsView: {
refresh: '刷新',
close: '关闭',
closeOthers: '关闭其它',
closeAll: '关闭所有'
},
common: {
language: '语言',
welcome: '欢迎您,',
ok: '确定',
cancel: '取消',
},
language: {
zh: '简体中文',
en: '英文'
},
dashboard: {
siteInfo: '为了大家体验的一致性,数据库每1小时还原一次。不同于其他基于Element框架界面的花里胡哨,各种大按钮大缝隙,我们的原则:美观大方、简洁易用',
footer: {
copyright: '最好用的.Net权限工作流框架',
officialWebsite: '官方网站'
}
}
}
注意事项
- 使用嵌套对象结构组织翻译项
- 参数化文本使用
{param}
语法