vue2热更新突然失效

Question

最近的web项目遇到了一个难点，热更新突然失效了！是突然失效了，应该是没改什么配置，毕竟我认为热更新是自带的。这个问题造成每次修改代码都需要刷新浏览器，非常麻烦。
这是报错内容：

```javascript
main.js:651 Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/home/index.vue?vue&type=script&lang=js')
    at webpackHotUpdateex_web (main.js:651:39)
    at src_views_home_index_vue.82a2490c3a32f4c1.hot-update.js:10:70

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/087574924996114.png "#left")

看到这个，我就只知道是热更新失效。网上给了好多种方案，都有那么一点点关系，但都不是解决方案。
1. 找不到这个模块，是因为文件大小写错误。这个就不可能，以前就是这么写的，没问题。
2.node_modules里的socket-client文件里少了什么代码，我找了，连这个文件都没有。
3.webpack的版本错误，我找了package.json,都没找到什么webpack的版本，而且我认为不是，项目老早就建立了，这是突然热更新就失效的。这里@vue/cli-service是5.0.0
4.还有的是加上hot：true,或者安装热更新插件等等
总之，都没办法解决
package.json里是这样的。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/preset-env": "^7.22.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-polyfill": "^6.26.0",
    "compression-webpack-plugin": "^10.0.0",
    "echarts": "^5.4.1",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "js-cookie": "^3.0.1",
    "postcss-pxtorem": "^5.1.1",
    "sass": "^1.66.1",
    "sass-loader": "^10.4.1",
    "svg-sprite-loader": "^6.0.11",
    "swiper": "^5.4.5",
    "vue-i18n": "^8.27.0",
    "vue-template-compiler": "^2.6.14"
  },

```

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7651705
• 这篇博客也不错, 你可以看下vue在微信浏览器访问出现版本更新之后一直没反应，根本原因是浏览器没有重新拉取静态资源
• 您还可以看一下 陶新华老师的Vue实战-模版建站课程中的 【第九课】使用组件搭建考拉首页，并对组件进行优化小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue -web引入百度地图中的 地图加标识，标识上加超链接跳转 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  第一步：找到地图组件

  第二步：找到加载地图的函数

  第三步：在函数中继续写入，如一下代码：

  var data_info = [
                  [110.229321,25.227083,"地址：广西省桂林市七星区岭脚底<h4><a target='_blank' href='http://114.116.211.121:49151' style='color:blue;'>超前地质大屏</a></h4>"],
                  [104.979273,25.096498,"地址：贵州省黔西南布依族自治州水牛湾 <h4><a target='_self' href='http://114.116.211.121:49152' style='color:blue;'>提廊机</a></h4>"],
                  [112.60061,37.74101,"地址：山西省太原市小店区经济开发区 <h4><a target='_blank' href='http://114.116.211.121:49153' style='color:blue;'>超欠挖系统</a></h4>"],
                  [109.944203,40.764037,"地址：内蒙古省包头市石拐区二道坝沟 <h4><a target='_blank' href='http://114.116.211.121:49154' style='color:blue;'>超欠挖大屏</a></h4>"],
                  [126.448706,45.959158,"地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_self' href='http://114.116.211.121:49100' style='color:blue;'>超前地址系统</a></h4>"],
              ];
              var opts = {
                  min_width : 250,     // 信息窗口zuixiao宽度
                  min_height: 80,     // 信息窗口高度
                  title : "详细信息" , // 信息窗口标题
                  enableMessage:true//设置允许信息窗发送短息
              };
              for(var i=0;i<data_info.length;i++){
                  var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                  var content = data_info[i][2];
                  map.addOverlay(marker);               // 将标注添加到地图中
                  addClickHandler(content,marker);
              }
              function addClickHandler(content,marker){
                  marker.addEventListener("click",function(e){
                      openInfo(content,e)}
                  );
              }
              function openInfo(content,e){
                  var p = e.target;
                  var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                  var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
                  map.openInfoWindow(infoWindow,point); //开启信息窗口
              }

  data_info中html代码就是实现超链接

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^