如何在Vue 3的模型与服务类中使用i18n国际化翻译

核心实现思路 #

在Vue 3搭配VueI18n v9+的项目中，你可以直接创建并导出全局I18n实例，然后在模型、服务类这类非组件文件中导入使用，核心逻辑和Vue 2类似，但API有适配调整。

具体操作步骤 #

1. 创建并导出全局I18n实例 #

在项目的I18n配置文件（比如src/i18n/index.js）中完成初始化并导出实例：

import { createI18n } from 'vue-i18n'

// 多语言资源
const messages = {
  en: {
    common: {
      confirm: 'Confirm',
      cancel: 'Cancel'
    },
    user: {
      notFound: 'User not found'
    }
  },
  zh: {
    common: {
      confirm: '确认',
      cancel: '取消'
    },
    user: {
      notFound: '用户不存在'
    }
  }
}

// 初始化I18n实例
const i18n = createI18n({
  locale: 'zh', // 默认语言
  fallbackLocale: 'en', // 兜底语言
  messages
})

export default i18n

2. 在模型/服务类中调用翻译方法 #

直接导入全局I18n实例，通过i18n.global.t()方法完成翻译：

// 示例：src/models/UserModel.js
import i18n from '@/i18n'

export class UserModel {
  static getNotFoundTip() {
    // 调用翻译方法
    return i18n.global.t('user.notFound')
  }
}

// 示例：src/services/DialogService.js
import i18n from '@/i18n'

export function getDialogButtons() {
  return {
    confirmText: i18n.global.t('common.confirm'),
    cancelText: i18n.global.t('common.cancel')
  }
}

3. 额外说明 #

• 必须使用VueI18n v9及以上版本，该版本专门适配Vue 3的组合式API
• 若在组件内使用，除了上述全局实例方式，还可以用useI18n()组合式函数：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

• 切换语言时，模型/服务类中通过i18n.global.t()获取的内容会自动同步更新，因为实例的locale变化会触发全局翻译状态更新

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