Vue.js 3结合Quasar框架时无法访问app.config.globalProperties的问题求助

阿华AIGC实验室

2026-4-30

解决Vue 3 + Quasar中全局属性无法访问的问题

你的问题核心在于Quasar boot文件的用法错误——你手动创建了一个全新的Vue应用实例，而没有使用Quasar框架已经初始化好并传递给boot文件的那个实例，导致你挂载的全局属性根本没附加到实际运行的应用上，自然在组件里访问不到。

正确的修改步骤：

重构/src/boot/gfunc.js文件：
不需要手动导入createApp或Vue，Quasar会自动将当前应用的实例通过上下文参数传递给boot文件的导出函数，我们直接使用这个实例即可：
```
export default ({ app }) => {
  app.config.globalProperties.$module = 'foo'
}
```
保持quasar.conf.js的boot配置不变：
```
boot: ['gfunc'],
```

组件中的代码无需修改：

beforeCreate : function () { console.log(this.$module); }

重新运行项目后，控制台就能正常输出foo了。

额外说明（针对Composition API场景）：

如果你后续在组件的setup()函数中需要访问全局属性，不能直接用this，需要通过getCurrentInstance()获取：

import { getCurrentInstance } from 'vue'

setup() {
  const { appContext } = getCurrentInstance()
  console.log(appContext.config.globalProperties.$module) // 输出foo
}

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