Vue组件内调用app.config返回undefined的问题求助

嗨，我来帮你梳理下这个问题～

你在App.vue的<script setup>里直接调用app.config返回undefined，核心原因很简单：app这个变量是你在main.js里定义的局部变量，组件的作用域根本访问不到它！

下面给你几个可行的解决方案，还有一个小的代码规范建议：

方案一：通过getCurrentInstance获取全局配置 #

在Vue 3的<script setup>语法中，你可以借助getCurrentInstance()方法拿到当前组件的实例，进而访问到全局配置：

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
// 这样就能拿到你设置的全局属性了
console.log(instance.appContext.config.globalProperties.msg)

方案二：直接访问全局属性（更推荐） #

如果你只是想获取全局属性msg，不用绕到config这么深，直接通过实例的proxy访问更简洁：

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
console.log(proxy.$msg) // 直接输出 'one, two, three'

甚至在模板里可以直接用{{ $msg }}，不需要额外的脚本代码哦。

小规范提醒：调整main.js的代码顺序 #

你现在在main.js里是先挂载app，再设置全局属性，虽然可能暂时能生效，但更规范的做法是先配置全局属性，再挂载应用，避免潜在的时序问题：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
const globalProps = app.config.globalProperties

// 先设置全局属性
globalProps.msg = 'one, two, three'

// 再挂载应用
app.use(router).mount('#app')

备注：内容来源于stack exchange，提问作者gespinha