Laravel Vue项目子组件调用jQuery $.ajax报TypeError问题

核心冲突来自全局引入的jQuery版本特性+脚本加载顺序带来的引用污染：

• 你在blade模板中引入的是jquery-3.5.1.slim.min.js，这是jQuery官方推出的精简构建版本，完全移除了$.ajax、自定义动画、已废弃接口等模块，仅保留DOM操作、事件处理核心能力，这是TypeError: $.ajax is not a function报错的直接原因。
• 分场景表现差异是组件生命周期和脚本执行顺序刚好撞上导致的：
  • 父组件初始化执行created钩子时，blade里引入的slim版CDN脚本还未完成全局window.$的覆盖，此时你通过npm安装、模块化import引入的完整版jQuery还在作用域内，$.ajax调用正常。
  • 点击按钮渲染子组件时，slim版jQuery已经完成全局覆盖，子组件created阶段拿到的$是无ajax能力的slim版本，直接触发报错。
  • 到子组件mounted阶段，后续加载的bootstrap.bundle.min.js已经把modal等插件方法挂载到当前全局的slim jQuery实例上，因此$('#xxx').modal()可以正常运行，造成jQuery功能正常的错觉。
• 子组件单独import jQuery依然报错，是因为Laravel Mix默认的webpack配置未对jQuery做模块隔离，模块化引入的jQuery引用会被全局的slim版本污染，无法拿到原版带ajax的实例。

按推荐优先级排序：

• 方案1（彻底解决依赖冲突，长期维护最优）：移除blade模板中jQuery、Bootstrap的CDN引入，全部依赖通过npm管理
  1. 安装对应版本依赖：

     npm install jquery@3.5.1 bootstrap@4.5.3 popper.js
     

  2. 在resources/js/app.js中全局注册依赖，无需每个组件重复import：

     window.$ = window.jQuery = require('jquery');
     require('bootstrap');
     

  3. 删除blade模板中两段CDN脚本标签，后续所有组件内直接使用$即可，拿到的永远是带完整能力的jQuery，不会出现版本覆盖问题。
• 方案2（最小改动快速修复）：替换blade中的slim版jQuery为完整版
  将原有slim版本的jQuery CDN替换为同版本非slim的完整版构建，保证全局挂载的$自带ajax方法，即可直接解决报错，注意保持版本号和原有一致，避免Bootstrap兼容性问题。
• 方案3（临时兼容方案，不推荐长期使用）：模块化引入jQuery时设置独立别名，避开全局污染
  在需要调用ajax的组件内，给引入的jQuery设置和全局$不重名的别名，强制使用npm安装的完整版实例：

  import $$ from 'jquery';
  export default {
    created() {
      // 用别名发起ajax请求，不会被全局slim版本覆盖
      $$.ajax({
        // 请求配置
      })
    }
  }
  

在父组件created、子组件created、子组件mounted三个节点分别打印console.log($.fn.jquery, typeof $.ajax)，即可直接看到不同阶段拿到的jQuery版本号、ajax方法是否存在，快速确认版本覆盖问题。
同时可以检查webpack.mix.js配置，如果设置了externals将jQuery指向全局变量，要么删除该配置，要么保证全局引入的是完整版jQuery。

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