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 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在创建 axios 实例时，将 i18n 实例作为闭包变量传入：在
src/utils/request.ts中 import { createI18n } 后导出的i18n实例，直接在拦截器回调中引用 - 使用全局属性挂载（如
app.config.globalProperties.$t）+ 在拦截器中通过window.$t或独立导出函数桥接（更轻量，无 Vue 实例依赖） - 避免在拦截器内 import { useI18n } —— 会触发“not inside setup()”报错
错误提示触发时机与语言切换兼容性
用户切换语言时，已发出但未响应的请求仍按旧语言提示；新请求自动走新语言。无需特殊处理，但要注意：
立即学习“前端免费学习笔记（深入）”；
- Toast / Message 组件需支持响应式语言更新（如 Element Plus 的
ElMessage需手动重设message，或用useI18n的t函数包裹再调用） - 若提示组件内部缓存了翻译结果，应在语言切换后主动清空或强制刷新
- 服务端返回的
code必须稳定、语义明确，不随语言变化（这是多语言提示的前提）
示例：带 i18n 的响应拦截器片段
假设你使用 vue-i18n@v9，且已创建并导出 i18n 实例：
import { i18n } from '@/locales' // 导出的 i18n 实例
import { ElMessage } from 'element-plus'
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
const msg = i18n.t(`error.${res.code}`) || i18n.t('error.unknown')
ElMessage.error(msg)
return Promise.reject(new Error(msg))
}
return res
},
error => {
// 网络错误、超时等也走 i18n 提示
const msg = i18n.t('error.network') || 'Network error'
ElMessage.error(msg)
return Promise.reject(error)
}
) 
