Vben精讲：13-Vben页面国际化设置

文章目录参考资料插件配置默认语言动态切换语言新增翻译文本使用翻译文本新增语言包界面切换语言功能远程加载语言包第三方语言包移除国际化参考资料https://doc.vben.pro/https://doc.vben.pro/guide/in-depth/locale.html插件i18n Ally配置默认语言apps\web-antd\src\preferences.tsexportconstoverridesPreferencesdefineOverridesPreferences({app:{locale:en-US,},});动态切换语言packages\effects\layouts\src\widgets\language-toggle.vueasyncfunctionhandleUpdate(value:string|undefined){if(!value)return;constlocalevalueasSupportedLanguagesType;updatePreferences({app:{locale,},});awaitloadLocaleMessages(locale);}新增翻译文本apps\web-antd\src\locales\langs\zh-TW\demos.json{title:演示,antd:Ant Design Vue,vben:{title:项目,about:关于,document:文档,antdv:Ant Design Vue 版本,antdv-next:Antdv Next 版本,naive-ui:Naive UI 版本,element-plus:Element Plus 版本,tdesign:TDesign Vue 版本},about:{desc:---Vben Admin 是一个现代的管理模版。---}}apps\web-antd\src\locales\langs\zh-TW\page.json{auth:{login:登录,register:注册,codeLogin:验证码登录,qrcodeLogin:二维码登录,forgetPassword:忘记密码,profile:个人中心},dashboard:{title:概览,analytics:分析页,workspace:工作台}}使用翻译文本apps\web-antd\src\views\demos\antd\index.vuediv{{$t(demos.about.desc)}}/div新增语言包packages\locales\src\langs\zh-TW\authentication.jsonpackages\locales\src\langs\zh-TW\common.jsonpackages\locales\src\langs\zh-TW\preferences.jsonpackages\locales\src\langs\zh-TW\profile.jsonpackages\locales\src\langs\zh-TW\ui.jsonapps\web-antd\src\locales\langs\zh-TW\demos.jsonapps\web-antd\src\locales\langs\zh-TW\page.jsonpackages\constants\src\core.ts/** * zh_CN 登录页面 url 地址 */exportconstLOGIN_PATH/auth/login;exportinterfaceLanguageOption{label:string;value:en-US|zh-CN|zh-TW;}/** * Supported languages */exportconstSUPPORT_LANGUAGES:LanguageOption[][{label:简体中文,value:zh-CN,},{label:English,value:en-US,},{label:繁体中文,value:zh-TW,},];packages\locales\src\typing.tsexporttypeSupportedLanguagesTypeen-US|zh-CN|zh-TW;界面切换语言功能apps\web-antd\src\preferences.tsexportconstoverridesPreferencesdefineOverridesPreferences({widget:{languageToggle:false,},});interfaceWidgetPreferences{/** 是否启用全屏部件 */fullscreen:boolean;/** 是否启用全局搜索部件 */globalSearch:boolean;/** 是否启用语言切换部件 */languageToggle:boolean;/** 是否开启锁屏功能 */lockScreen:boolean;/** 是否显示通知部件 */notification:boolean;/** 显示刷新按钮 */refresh:boolean;/** 是否显示侧边栏显示/隐藏部件 */sidebarToggle:boolean;/** 是否显示主题切换部件 */themeToggle:boolean;/** 是否显示时区部件 */timezone:boolean;}远程加载语言包apps\web-antd\src\locales\index.ts/** * 加载应用特有的语言包 * 这里也可以改造为从服务端获取翻译数据 * param lang */asyncfunctionloadMessages(lang:SupportedLanguagesType){const[appLocaleMessages]awaitPromise.all([localesMap[lang]?.(),loadThirdPartyMessage(lang),]);returnappLocaleMessages?.default;}第三方语言包apps\web-antd\src\locales\index.ts移除国际化apps\web-antd\src\preferences.tsexportconstoverridesPreferencesdefineOverridesPreferences({widget:{languageToggle:false,},});exportconstoverridesPreferencesdefineOverridesPreferences({app:{locale:en-US,},});apps\web-antd\src\locales\index.tsasyncfunctionsetupI18n(app:App,options:LocaleSetupOptions{}){awaitcoreSetup(app,{defaultLocale:preferences.app.locale,loadMessages,missingWarn:false,...options,});}