Vue3+Vite项目部分JS无法打断点提示null

2022-11-26  本文已影响0人  anyly
最近在用若依的Vue3项目调试的时候发现部分JS代码无法打断点提示null
无法加载 [http://127.0.0.1:81/src/store/modules/null](http://127.0.0.1:81/src/store/modules/null) 
的内容(HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE)

1.想调试加载路由代码

image.png
2.点击第40行结果提示 打不了断点 提示
无法加载 http://127.0.0.1:81/src/store/modules/null 的内容(HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE)
image.png

3.尝试前端终极奥义 代码写 \color{red}{ debugger}

image.png

刷新下浏览器(看permission.js?t=xxxxxxx,和下图对应,)


image.png

4.重启项目(\color{red}{没球用})

此时心里有一万只..........跑过,开始打击学习的积极性。

开始尝试 百度一些关键词
  1. /src/store/modules/null (\color{red}{没球用})
  2. vue3无法打断点 (\color{red}{没球用})
    .... 中间查了N个关键字

猜想可能不是vue问题,可能是vite问题,

于是百度
1.https://blog.csdn.net/leaning_java/article/details/122828550
2.github找到一个vite有一个issues(打断点漂移,这个在vue2项目的时候有遇到)
https://github.com/vitejs/vite/issues/6228(\color{red}{情况有点像})
.... 中间查了N个帖子

小脑瓜一想,会不会和vite某个插件有关系,打开package.json

  "dependencies": {
    "@element-plus/icons-vue": "1.1.4",
    "@vueuse/core": "8.5.0",
    "axios": "0.26.1",
    "echarts": "5.3.2",
    "element-plus": "2.1.8",
    "file-saver": "2.0.5",
    "fuse.js": "6.5.3",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.2.1",
    "nprogress": "0.2.0",
    "pinia": "2.0.14",
    "vue": "3.2.37",
    "vue-cropper": "1.0.3",
    "vue-router": "4.0.14"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "2.3.3",
    "@vue/compiler-sfc": "3.2.36",
    "sass": "1.52.1",
    "unplugin-auto-import": "0.8.5",
    "vite": "2.9.14",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-plugin-vue-setup-extend": "0.4.0"
  }

感觉有关系的会是 下面的4个

    "@vitejs/plugin-vue": "2.3.3",
    "vite": "2.9.14",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-plugin-vue-setup-extend": "0.4.0"

安排升级下升级到最新(vite从2.x 升级到3.x需要改配置)

最终排查是@vitejs/plugin-vue 版本问题,升级下就好了

@vitejs/plugin-vue
上一篇下一篇

猜你喜欢

热点阅读