Vue-i18n：如何在Vue组件外实现错误码翻译及通用提示函数？

核心思路 #

useI18n() 只能在组件的 setup 函数顶部调用，因此全局工具函数中需要直接使用Vue-i18n的实例对象，而非依赖组件钩子。

步骤1：导出Vue-i18n实例 #

假设你的i18n实例在src/i18n/index.ts中创建，需将实例导出供全局使用：

// src/i18n/index.ts
import { createI18n } from 'vue-i18n'
// 导入你的语言包文件
import zhCN from './locales/zh-CN.json'
import enUS from './locales/en-US.json'

const i18n = createI18n({
  locale: 'zh-CN',
  legacy: false, // Vue3+推荐开启该选项使用Composition API模式
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

export default i18n

步骤2：编写全局showError函数 #

在src/utils/errorHandler.ts（或自定义工具文件）中实现可全局调用的错误处理函数：

import { ElMessageBox } from "element-plus";
import i18n from '@/i18n'

// 提取错误码的工具函数，根据后端返回结构调整字段名
const getErrorCode = (e: any): string => {
  if (typeof e === 'string') {
    return e
  }
  // 假设错误对象的错误码字段为errorCode，可根据实际情况修改
  return e.errorCode || e.code || 'general.unknown_error'
}

export const showError = (e: any) => {
  const t = i18n.global.t
  const errorCode = getErrorCode(e)
  // 处理翻译 fallback：若错误码无对应翻译则显示默认提示
  const errorMsg = t(errorCode) === errorCode 
    ? t('general.unknown_error') 
    : t(errorCode)

  ElMessageBox({
    type: 'error',
    title: t('general.error'),
    message: errorMsg,
  })
}

步骤3：在任意位置调用showError #

无论在组件内还是独立API文件中，都可直接导入调用：

组件中使用示例 #

import { ref } from 'vue'
import { showError } from '@/utils/errorHandler'
import { some_api } from '@/api'

const loading = ref(false)
const data = ref('')

const doSomething = async() => {
  loading.value = true
  try {
    data.value = await some_api.call()
  } catch (e) {
    showError(e)
  } finally {
    loading.value = false
  }
}

独立API文件中使用示例 #

import axios from 'axios'
import { showError } from '@/utils/errorHandler'

export const some_api = {
  async call() {
    try {
      const res = await axios.get('/api/some-path')
      return res.data
    } catch (e) {
      // 提取后端返回的错误信息，根据axios响应结构调整
      const error = e.response?.data?.error || e.message
      showError(error)
      throw e // 可选择继续抛出错误，方便上层额外处理
    }
  }
}

补充说明 #

• 需在语言包中提前定义错误码对应的翻译，例如zh-CN.json：

  {
    "general": {
      "error": "错误提示",
      "unknown_error": "未知错误",
      "invalid_language": "语言格式无效"
    }
  }
  

• 若错误需动态参数（如user.not_found需要用户名），可扩展函数支持参数传递：

  export const showError = (e: any, params?: Record<string, any>) => {
    const t = i18n.global.t
    const errorCode = getErrorCode(e)
    const errorMsg = t(errorCode, params) === errorCode 
      ? t('general.unknown_error') 
      : t(errorCode, params)
    // 后续弹窗逻辑不变
  }
  

内容的提问来源于stack exchange，提问作者nagylzs