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 或用户信息与语言无关，不影响登录状态逻辑
