Vue 3 + Vite环境下无法访问全局变量问题求助

开发者阿泽

2026-8-10

解决Vue3组件中app.config is undefined的问题

问题原因

你在组件的<script setup>中直接访问app变量，但该变量仅在App.js中定义，组件文件并未导入它，导致app未定义，进而触发app.config is undefined的错误。

解决方案

方法1：直接访问全局属性（推荐）

既然已经通过app.config.globalProperties.$globalVar注册了全局属性，在<script setup>中有两种方式访问：

直接使用全局属性名
通过getCurrentInstance获取组件实例后访问全局配置

<script setup>
import { onMounted, getCurrentInstance } from 'vue'

onMounted(() => {
  // 方式1：直接调用全局属性
  console.log($globalVar);

  // 方式2：通过组件实例获取全局配置
  const instance = getCurrentInstance();
  console.log(instance.appContext.config.globalProperties.$globalVar);
})
</script>

方法2：导出并导入App实例（不推荐）

如果必须在组件中访问app实例，可以先在App.js导出它：

// App.js
import './bootstrap';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

// 导出app实例
export const app = createApp({});

app.config.globalProperties.$globalVar = 'globa11lVar'

// 路由配置及后续代码不变
const routes = [
    { path: '/', component: ExampleComponent },
    { path: '/about', component: ExampleComponent2 },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

app.use(router);
app.mount('#app');

然后在组件中导入并使用：

<script setup>
import { onMounted } from 'vue'
// 根据实际文件路径调整导入路径
import { app } from '../App.js'

onMounted(() => {
  console.log(app.config.globalProperties);
})
</script>