Vue3导出app实例后外部文件使用报错：Cannot access 'app' before initialization

问题原因 #

你遇到的ReferenceError: Cannot access 'app' before initialization是因为模块加载顺序冲突：当index.js导入main.js时，main.js的代码仍在执行流程中，app变量虽已定义但未完成完整初始化就被导出，外部文件提前访问就会触发错误。

解决方案 #

方案1：拆分app实例管理文件 #

将app实例的创建与初始化逻辑分离，避免模块间的加载冲突：

1. 创建单独的src/app.js文件负责实例创建：

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

// 创建并导出app实例
const app = createApp(App)
export default app

2. 修改src/main.js，导入app实例并完成配置与挂载：

import app from './app.js'
import router from './router'

// 配置路由并挂载应用
app.use(router)
app.mount('#app')

3. 在index.js中直接导入app.js的实例：

import app from '../renderer/src/app.js'

console.log(app)
// 现在可以正常调用app.component()或app.use()
app.component('CustomComponent', /* 组件定义 */)

方案2：通过函数延迟获取实例 #

如果不想拆分文件，可以用导出函数的方式确保实例初始化完成后再访问：

1. 修改src/main.js：

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

let appInstance = null

// 导出获取实例的函数，确保实例已初始化
export const getApp = () => {
  if (!appInstance) {
    appInstance = createApp(App)
    appInstance.use(router)
    appInstance.mount('#app')
  }
  return appInstance
}

// 初始化应用
getApp()

2. 在index.js中调用函数获取实例：

import { getApp } from '../renderer/src/main.js'

const app = getApp()
console.log(app)
app.component('CustomComponent', /* 组件定义 */)

两种方案都能解决未初始化的问题，方案1的代码结构更清晰，符合模块化设计思路，更推荐使用。

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