Vue.js封装Bootstrap Modal组件报testInstance.$mount不是函数问题

核心原因排查 #

• Vue版本与语法不匹配
• 实例初始化方式错误
• 依赖加载顺序/引入包类型错误
• 测试场景下适配器配置错误

具体修复步骤 #

第一步：确认Vue版本 #

执行代码打印版本验证：
console.log(Vue.version)

第二步：对应版本修复 #

若使用Vue 2.x版本

1. 确保实例创建语法正确：

// 正确写法
const testInstance = new Vue(你的Modal组件配置)
testInstance.$mount('#挂载节点ID')

2. 确认引入的不是runtime-only版本的Vue，runtime-only版本不带模板编译能力，也可能缺少$mount相关暴露方法，需要引入带compiler的完整版Vue，可将引入路径替换为vue/dist/vue.esm.js验证。
3. 确认Vue加载完成后再执行组件初始化代码，避免异步加载导致实例方法未挂载。

若使用Vue 3.x版本

该报错90%以上是混用了Vue 2的语法导致，Vue 3不再支持new Vue()创建实例，也没有$mount实例方法：

1. 替换为Vue 3标准实例创建语法：

// 正确写法
import { createApp } from 'vue'
const app = createApp(你的Modal组件配置)
app.mount('#挂载节点ID')

2. 确认安装的周边依赖（如单元测试工具、Vue插件）适配Vue 3版本，版本不兼容会导致生成的实例没有对应方法。

额外适配Bootstrap Modal注意事项 #

确保jQuery加载完成后再引入Bootstrap的JS文件，避免Bootstrap Modal初始化失败，同时不要在Vue的template模板内直接操作Bootstrap Modal的DOM，建议通过ref获取DOM实例后再调用Bootstrap的模态框方法。

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