Vue2与Webpack Mix：修复日期选择器后出现this.$http.get未定义错误

我之前也碰到过类似的Vue组件兼容坑，结合你的情况给你梳理下解决过程和后续问题的排查方向：

先说说Vue Bootstrap DateTimePicker的解决逻辑（你已搞定的部分，帮你再理清楚） #

之前这个日期选择器完全无法工作，核心原因是jQuery引入冲突和Webpack打包配置不全，你做的两个操作正好命中了关键点：

• 在webpack.mix.js里给相关配置项加上...扩展运算符，是为了确保DateTimePicker的依赖能被正确合并到打包配置中，不会被遗漏
• 移除Blade视图里所有jQuery引用，是因为Vue生态下的DateTimePicker组件多是基于Vue封装的，全局引入的jQuery会干扰组件的初始化逻辑，导致渲染失败

关于this.$http.get失效的排查方案（重点解决这个新问题） #

刚解决完一个坑又踩新的，这种连锁问题确实头疼，给你几个实际可行的排查方向：

1. 先检查app.js里的HTTP库挂载是否正确
   不管你用的是Vue Resource还是Axios，挂载到Vue原型的步骤不能错：

   • 如果是Vue Resource：

     import VueResource from 'vue-resource'
     // 必须调用Vue.use()才能全局挂载$http
     Vue.use(VueResource)
     

   • 如果是Axios：

     import axios from 'axios'
     // 手动挂载到Vue原型，确保组件能通过this.$http访问
     Vue.prototype.$http = axios
     

   别只引入库却不做挂载，这是最容易犯的低级错误。

2. 排查全局移除jQuery的连锁影响
   虽然移除Blade里的jQuery解决了DateTimePicker的问题，但有些老插件或者第三方依赖可能隐式依赖jQuery，导致Vue的HTTP请求底层被干扰。可以试试在webpack.mix.js里把jQuery作为全局变量局部暴露，同时测试DateTimePicker的兼容性：

   mix.autoload({
     jquery: ['$', 'window.jQuery']
   })
   

   注意：如果这么做后DateTimePicker又出问题，可能需要调整组件的引入顺序，或者给DateTimePicker单独配置排除jQuery的选项。

3. 一定要看浏览器控制台的错误信息
   别忽略开发者工具Console面板里的报错！比如如果提示this.$http is undefined，那就是挂载的问题；如果是CORS错误，那是后端配置的问题；如果是404，那是请求URL写错了。具体错误信息是定位问题的核心，比瞎试方案管用多了。

4. 检查this的上下文是否正确
   很多时候$http失效不是因为库没挂载，而是调用它的地方this指向不对。比如在普通回调函数里，this会指向回调本身，而不是Vue组件实例：

   // 错误写法：回调里this不是Vue实例
   setTimeout(function() {
     this.$http.get('/api/data') // 这里会报错
   }, 1000)
   
   // 正确写法：用箭头函数绑定上下文
   setTimeout(() => {
     this.$http.get('/api/data')
   }, 1000)
   

   或者提前把this存成变量：const self = this，然后在回调里用self.$http。

5. 检查依赖版本的兼容性
   如果你的Vue版本是3.x，那Vue Resource已经不支持了，必须用Axios或者其他适配Vue 3的HTTP库；如果是Vue 2.x，也要确保Vue Resource/Axios的版本和Vue版本匹配，别装了不兼容的版本。

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