Quasar中Vue i18n组件内使用报错：需通过app.use安装的解决方法

问题根源 #

你遇到的SyntaxError: Need to install with app.use function错误，主要来自两个问题：

1. Vue3环境下错误沿用了Vue2的插件挂载方式
2. legacy模式关闭后，useI18n默认作用域并非全局

修复步骤 #

1. 修正boot/i18n.js的挂载逻辑

Quasar v2+基于Vue3，boot文件的默认导出函数不需要Vue参数，且Vue3中不再使用Vue.use()挂载插件，直接通过app.use()即可完成全局挂载。修改后的代码：

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

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'en',
  fallbackLocale: 'en',
  availableLocales: ['es', 'en'],
  messages,
})

// Vue3环境下仅需挂载到app实例
export default ({ app }) => {
  app.use(i18n)
}

export { i18n }

2. 组件内指定useI18n的全局作用域

在legacy: false（Composition API模式）下，useI18n()默认返回组件级的i18n实例，必须显式指定useScope: 'global'才能获取到全局挂载的实例。修改组件代码：

<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'

  // 指定全局作用域获取i18n实例
  const { t } = useI18n({ useScope: 'global' })
  const $router = useRouter()

  const title = ref(t('errors.rules.notFound.title'))
</script>

3. 确认quasar.config.js配置

确保boot数组中已正确添加'i18n'：

// quasar.config.js
module.exports = {
  // ...其他配置项
  boot: ['i18n'],
  // ...其他配置项
}

验证组件外使用不受影响 #

你之前导出的i18n实例未被修改，组件外依然可以正常导入使用，比如在独立JS文件中：

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

// 调用全局实例的翻译方法
console.log(i18n.global.t('some.key'))

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