Vue3 CLI项目集成ModalService报default is not a constructor如何解决

错误原因 #

你使用的教程是Vue 2版本的实现，Vue 2支持直接通过new Vue()创建实例作为事件总线使用，但Vue 3已经移除了默认导出的Vue构造函数，因此执行new Vue()时会抛出「不是构造函数」的报错。

修复方案 #

不需要把模态框逻辑耦合到main.js中，只要修改modal.service.js的实现，保持原有接口不变即可：

步骤1：重写modal.service.js #

// modal.service.js
// 实现极简事件总线替代Vue 2的实例事件能力
const modalEventBus = {
  events: Object.create(null),
  on(eventName, handler) {
    if (!this.events[eventName]) this.events[eventName] = []
    this.events[eventName].push(handler)
  },
  emit(eventName, payload) {
    this.events[eventName]?.forEach(handler => handler(payload))
  }
}

export default {
  // 原有open方法接口完全不变
  open(component, props = {}) {
    return new Promise((resolve, reject) => {
      modalEventBus.emit('open', { component, props, resolve, reject })
    })
  },
  // 供模态框根容器组件注册监听使用
  onModalOpen(handler) {
    modalEventBus.on('open', handler)
  }
}

步骤2：可选全局挂载（方便全局调用） #

在你的main.js中新增如下配置，就可以在任意组件内通过this.$modal.open()调用服务：

// main.js 新增代码
import modalService from './你的modal.service.js文件相对路径'

const app = createApp(App).use(router)
// ... 你原有的其他配置
app.config.globalProperties.$modal = modalService
app.mount('#app')

后续适配 #

你原有的模态框容器组件，只要把原来监听$on('open')的逻辑，改成调用modalService.onModalOpen()注册回调即可，其余业务逻辑不需要改动。

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