vue 3中实现多语言错误提示需将错误码映射转为i18n动态查表，响应拦截器通过闭包引用全局i18n实例调用t(error.${code})获取翻译，未命中时回退兜底，确保提示与语言切换实时同步。
Vue 3 中请求与响应拦截器结合多语言配置错误提示，核心在于把错误码映射逻辑从硬编码转为 i18n 动态查表，并确保拦截器能访问当前语言环境。不依赖具体 UI 库，也不强耦合 Pinia/Vuex，而是利用 Composition API 的响应式能力或全局 i18n 实例完成提示渲染。
响应拦截器中动态读取多语言错误文案
在响应拦截器里，后端通常返回统一结构（如 { code: 'USER_NOT_FOUND', message: '用户不存在' }），其中 code 是稳定标识，message 是默认中文。应忽略后端传的 message，改用本地化 key 查 i18n 实例：
- 定义标准错误码映射表，例如
src/locales/errors/en.json：{"USER_NOT_FOUND": "User not found", "AUTH_EXPIRED": "Login expired, please log in again"} - 响应拦截器中不再直接弹
res.message，而是调用t(`error.${res.code}`)获取翻译文本 - 若未命中 key，回退到英文兜底或显示原始 code，避免空提示
确保拦截器能访问 i18n 实例
axios 拦截器是纯函数，无法直接使用 useI18n()（需 setup 上下文）。推荐两种安全方式：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章