如何在Quasar Vue3项目中组件内外使用vue-i18n国际化？

我正在Quasar、Vue3（组合式API）和vue-i18n环境下实现国际化功能，希望在应用的组件内外都能使用国际化，但总是出现报错。

当前i18n配置代码 #

我在一篇博客中看到了对应的i18n = lang写法

import { boot } from 'quasar/wrappers'
import VueI18n from 'vue-i18n'
const { createI18n } = VueI18n
import messages from '../config/i18n'

let i18n

export default boot(({ app, Vue }) => {
  Vue.use(VueI18n)

  const lang = createI18n({
    locale: 'en',
    legacy: false,
    messages,
  })

  i18n = lang

  app.use(lang)
})

export { i18n }

组件外使用示例（验证规则文件） #

我导入了配置变量，也尝试过导入export default返回的内容，但两种方式都无效：

import { i18n } from './../boot/i18n'

console.log(i18n)

export default {
  required: (value) => !!value || i18n.t('errors.rules.required'),
  email: (value) => {
    return (
      /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
      i18n.global.t('errors.rules.email')
    )
  },
  password: (value) => value.length >= 6 || i18n.t('errors.rules.password'),
  integer: (value) => /^\d+$/.test(value) || i18n.t('errors.rules.integer'),
  float: (value, decimals) => {
    const regex = new RegExp(`^\\d+\\.\\d{${decimals},}$`)
    return regex.test(value) || i18n.t('errors.rules.float', { decimals })
  },
  stringsOnly: (value) => !/\d/.test(value) || i18n.t('errors.rules.stringsOnly'),
  min: (value, min) => value >= min || i18n.t('errors.rules.min', { min }),
  max: (value, max) => value <= max || i18n.t('errors.rules.max', { max }),
  minLength: (value, min) => {
    value = String(value)
    return value.length >= min || i18n.t('errors.rules.minLength', { min })
  },
  maxLength: (value, max) => {
    value = String(value)
    return value.length <= max || i18n.t('errors.rules.maxLength', { max })
  },
  isUrl: (value) => {
    return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(value) || i18n.t('errors.rules.isUrl')
  },
}

我确认路径是正确的，但尝试翻译对象时仍然失败。

英文语言包（en） #

export default {
  errors: {
    rules: {
      required: 'Required',
      email: 'Invalid email address',
      password: 'This password is weak',
      integer: 'Only integers are allowed',
      float: 'Only numbers with at least {decimals} decimals are allowed',
      stringsOnly: 'Only text strings are allowed, no numbers',
      min: 'Value must be greater than or equal to {min}',
      max: 'Value must be less than or equal to {max}',
      minLength: 'Value length must be greater than or equal to {min}',
      maxLength: 'Value length must be less than or equal to {max}',
      isUrl: 'Invalid URL',
    },
  },
}

使用的依赖版本 #

{
   "dependencies":{
      "@quasar/extras":"^1.16.9",
      "quasar":"^2.14.5",
      "vue":"^3.3.11",
      "vue-i18n":"^9.9.0"
   }
}

请问如何在Vue组件外使用国际化功能？我已经尝试了多种方法，但都没有效果。

问题根源 #

1. 异步初始化导致的变量未赋值：Quasar的boot文件是应用初始化阶段异步执行的，当你在组件外的文件（比如验证规则）中导入i18n时，boot函数可能还没执行，此时i18n还是初始的undefined，调用翻译方法自然报错。
2. 翻译方法调用错误：vue-i18n v9开启legacy: false（组合式API模式）后，翻译方法t需要通过global对象访问，直接调用i18n.t是无效的。

修复步骤 #

1. 调整boot文件，确保i18n实例同步可访问 #

修改boot/i18n.js，直接在模块顶层创建i18n实例，避免异步赋值导致的未定义问题：

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from '../config/i18n'

// 直接创建实例，确保导出时已有值
const i18n = createI18n({
  locale: 'en',
  legacy: false,
  messages,
})

export default boot(({ app }) => {
  // 将实例挂载到Vue应用
  app.use(i18n)
})

export { i18n }

2. 在组件外文件中正确调用翻译方法 #

所有翻译调用统一使用i18n.global.t：

import { i18n } from './../boot/i18n'

export default {
  required: (value) => !!value || i18n.global.t('errors.rules.required'),
  email: (value) => {
    return (
      /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
      i18n.global.t('errors.rules.email')
    )
  },
  password: (value) => value.length >= 6 || i18n.global.t('errors.rules.password'),
  integer: (value) => /^\d+$/.test(value) || i18n.global.t('errors.rules.integer'),
  float: (value, decimals) => {
    const regex = new RegExp(`^\\d+\\.\\d{${decimals},}$`)
    return regex.test(value) || i18n.global.t('errors.rules.float', { decimals })
  },
  stringsOnly: (value) => !/\d/.test(value) || i18n.global.t('errors.rules.stringsOnly'),
  min: (value, min) => value >= min || i18n.global.t('errors.rules.min', { min }),
  max: (value, max) => value <= max || i18n.global.t('errors.rules.max', { max }),
  minLength: (value, min) => {
    value = String(value)
    return value.length >= min || i18n.global.t('errors.rules.minLength', { min })
  },
  maxLength: (value, max) => {
    value = String(value)
    return value.length <= max || i18n.global.t('errors.rules.maxLength', { max })
  },
  isUrl: (value) => {
    return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(value) || i18n.global.t('errors.rules.isUrl')
  },
}

3. 动态切换语言的方法 #

如果后续需要切换语言，直接修改i18n.global.locale.value即可：

import { i18n } from './boot/i18n'

// 切换为中文示例
i18n.global.locale.value = 'zh-CN'

验证 #

在验证规则文件中添加console.log(i18n.global.t('errors.rules.required'))，运行应用后查看控制台，若输出Required则说明国际化功能正常工作。

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