Vue.js中如何修复"modal is not a function"报错问题

触发$(...).modal is not a function是三个问题叠加导致的：

• modal()是Bootstrap框架提供的jQuery插件方法，不属于jQuery原生API，当前代码未引入Bootstrap的JS依赖，自然无法找到该方法。
• 脚本加载顺序错误：app.js添加了defer属性，且jQuery脚本标签放在app.js之后，Vue组件内代码执行时jQuery还未完成加载，无法正常调用。
• app.js中jQuery全局挂载的代码被注释，webpack打包的模块作用域下，组件内调用的$没有指向正确的、挂载了Bootstrap插件的jQuery实例，就算加载了jQuery也会报方法不存在。

按以下顺序调整代码即可：

1. 调整blade模板的脚本加载顺序，移除app.js的defer属性，按照「jQuery → Bootstrap JS → 项目自身app.js」的顺序加载脚本，修改后的body代码如下：

<body>
    <div id="app">
        <new-arrivals></new-arrivals>
    </div>
    <!-- 优先加载jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 加载项目对应版本的Bootstrap JS，提供modal插件能力 -->
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <!-- 最后加载编译后的项目前端脚本，移除defer -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>

注意：Bootstrap 5版本已移除jQuery依赖，不支持$(...).modal()的调用方式，需要改用Bootstrap 5原生JS API唤起模态框，上述调用方式仅适用于Bootstrap 3/4版本。

2. 打开js/app.js入口文件，放开之前注释的jQuery全局挂载代码，额外补充jQuery全局变量声明，保证Bootstrap插件能正确挂载到jQuery实例上，修改后的app.js代码如下：

require('./bootstrap');

import Vue from 'vue'
import { VueCtkDateTimePicker } from 'vue-ctk-date-time-picker';
import swal from 'sweetalert2';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
// 放开jQuery全局挂载
import $ from 'jquery';
window.$ = $;
window.jQuery = $; // 补充这行，Bootstrap插件默认识别window.jQuery挂载方法
window.Vue = require('vue');
window.swal = swal;
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);
Vue.component('new-arrivals', require('./components/NewArrivals.vue').default);


const app = new Vue({
    el: '#app'
});

3. 代码调整完成后，重新执行前端资源编译命令（开发环境用npm run dev，生产环境用npm run prod），清除浏览器缓存后刷新页面测试即可。

额外排查点：如果调整后仍然报错，可在浏览器控制台执行console.log($.fn.modal)，如果输出为undefined，说明存在jQuery多实例冲突：Bootstrap插件绑定到了A版本jQuery实例上，组件调用时用的是未绑定插件的B版本jQuery实例，此时统一所有依赖jQuery的插件使用挂载到window上的jQuery实例即可解决。

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