Vue 3 多语言登录提示需通过 i18n 统一管理文案，将提示键值对配置于 locales 文件，校验规则和 ElMessage 中均调用 t() 方法动态渲染，语言切换时表单提示自动更新且不重置校验状态。

Vue 3 中处理多语言环境下的登录提示，核心在于将提示文案从硬编码剥离，交由 i18n 系统统一管理，同时确保状态变更（如登录成功、失败、校验不通过）时能准确触发对应语言的提示。

多语言提示文案集中配置

在 i18n 配置文件（如 locales/zh-CN.ts 和 locales/en-US.ts）中，为登录相关提示定义键值对：

• 中文：{ loginSuccess: '登录成功', loginFailed: '登录失败，请检查账号或密码', invalidUsername: '账号格式不正确', invalidPassword: '密码长度不足6位' }
• 英文：{ loginSuccess: 'Login successful', loginFailed: 'Login failed. Please check your account or password', invalidUsername: 'Invalid username format', invalidPassword: 'Password must be at least 6 characters' }

表单校验规则中接入 i18n

自定义校验函数中，不再写死错误信息，而是调用 i18n 实例的 t() 方法：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 例如 validatorPassword 中：callback(new Error(t('invalidPassword')))
• Element Plus 的 rules 配置中，message 字段也应使用 t('xxx')，而非字符串字面量
• 确保 t 函数在 setup 中已正确引入（如通过 useI18n()）

登录响应结果的提示动态适配

调用登录接口后，根据返回状态显示提示，文案需实时响应当前语言：

• 使用 ElMessage 时：ElMessage({ type: 'success', message: t('loginSuccess') })
• 若后端返回具体错误码（如 401、403），可在前端映射为对应 i18n key：t(`error.${res.code}`)
• 避免在 API 层直接拼接提示语，所有用户可见文案必须走 i18n

语言切换后状态提示保持一致

用户在登录页切换语言，已输入内容和校验状态不应重置，但后续提示需立即生效：

• 表单字段的 prop 和 rules 是响应式的，i18n key 变化会自动更新错误提示文本
• 若使用了 el-form 的手动校验（如 formRef.value.validate()），无需额外操作，t() 调用本身已响应语言变化
• 注意：本地存储的 token 或用户信息与语言无关，不影响登录状态逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！