devtools-next
devtools-next copied to clipboard
vuejs
本地开发，路由切换，路由无法跳转，路由守卫正常工作，但 js文件无法请求到，页面一直处于卡顿(loading)状态。但注释掉插件后，路由跳转正常。
-
环境： 包管理工具：pnpm { "dependencies": { "vite": "5.2.11", "vue": "3.4.15", "vue-router": "4.2.5", }, "devDependencies":{ "vite-plugin-vue-devtools": "^7.2.0", }
}。 -
vite.config.ts: plugins: [ VueDevTools() ]
版本与 @mzc9915 所说的差不多 vue 3.4.27（尝试过3.3.0） vue-router 4.2.5 vue-devtools 7.2.0
同时尝试了降级vue-devtools到7.0.27，不起作用
从7.1.3升级到最新版 7.2.0
会加载两遍
加载两遍之后router.push 报错
Cannot redefine property: __navigationId
使用最新版浏览器插件 或者 降级到7.1.3中 没有这个问题
当我使用干净的项目启动时(7.2.0)，无法复现
我尝试使用 stackblitz 去构建一个相同的环境相同依赖的小 demo，但它似乎没有复现我的问题。 我目前的项目依赖内网环境，所以没办法分拆小demo。
但我刚才尝试，在 页面卡住时，按 F8 进入调试模式，发现代码阻塞的位置，如图 1：
source路径为：http://localhost:5173/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue/devtools-core/dist/index.js?v=3044aefa。
我尝试 F10调试时，如图2， 代码一直阻塞在红框位置。
不知道提供这些信息，是否有帮助
我7.1.3 和 7.2.0 都存在这个问题。 刚尝试了一下 7.1.3 版本，也是同样的问题。 我看了一下 pnpm.lock.yaml 文件里的信息，
虽然 vite-plugin-vue-devtools 版本是 7.1.3，但它的依赖装了7.2.0，不知道是否影响。
我7.1.3 和 7.2.0 都存在这个问题。 刚尝试了一下 7.1.3 版本，也是同样的问题。 我看了一下 pnpm.lock.yaml 文件里的信息，
虽然 vite-plugin-vue-devtools 版本是 7.1.3，但它的依赖装了7.2.0，不知道是否影响。
有同时在使用旧的 Vue DevTools 浏览器扩展吗，有的话版本是多少呢
-
我指定安装的 vite-plugin-vue-devtools 的版本是 7.1.3，版本没问题
-
旧插件是禁用的，不管是在 7.1.3 还是 7.2.0，都存在相同的问题；
还有一个可以帮忙提供的有用信息：
步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
还有一个可以帮忙提供的有用信息：
步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
当我使用DevTools 浏览器扩展 一切正常
还有一个可以帮忙提供的有用信息： 步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
当我使用DevTools 浏览器扩展 一切正常
可否帮忙提供一下 Vue Router 的配置信息
还有一个可以帮忙提供的有用信息： 步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
当我使用DevTools 浏览器扩展 一切正常
可否帮忙提供一下 Vue Router 的配置信息
我的路由是动态路由 如果您方便 可以远程调试
还有一个可以帮忙提供的有用信息： 步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
可否帮忙提供一下 Vue Router 的配置信息
我的路由是动态路由 如果您方便 可以远程调试
是通过 addRoute 动态添加的吗？
还有一个可以帮忙提供的有用信息： 步骤：关闭 DevTools Vite Plugin 插件，打开原先的 DevTools 浏览器扩展。这个问题是否也存在（有利于排查是 Vue Router DevTools Plugin 自身实现有问题还是新的 Vite Plugin 有问题）
可否帮忙提供一下 Vue Router 的配置信息
我的路由是动态路由 如果您方便 可以远程调试
是通过 addRoute 动态添加的吗？
是的
我想我应该找到问题了
不需要动态路由
复现步骤
"element-plus": "^2.7.2", "vue": "^3.4.27", "vue-router": "^4.3.2" autoImport({ resolvers: [ElementPlusResolver({ importStyle: "sass" })], dts: "src/typings/auto-imports.d.ts", include: [/.tsx?$/, /.vue$/],
components({ resolvers: [ ElementPlusResolver({ importStyle: "sass" })
在页面中使用 element-plus组件 然后在组件中使用 v-loading 指令
会有重复的路由
@webfansplz
我想我应该找到问题了
不需要动态路由
复现步骤
"element-plus": "^2.7.2", "vue": "^3.4.27", "vue-router": "^4.3.2" autoImport({ resolvers: [ElementPlusResolver({ importStyle: "sass" })], dts: "src/typings/auto-imports.d.ts", include: [/.tsx?$/, /.vue$/],
components({ resolvers: [ ElementPlusResolver({ importStyle: "sass" })
在页面中使用 element-plus组件 然后在组件中使用 v-loading 指令
会有重复的路由
@webfansplz
非常感谢，可以提供一个 github demo 复现仓库吗 🙏
我想我应该找到问题了 不需要动态路由 复现步骤 "element-plus": "^2.7.2", "vue": "^3.4.27", "vue-router": "^4.3.2" autoImport({ resolvers: [ElementPlusResolver({ importStyle: "sass" })], dts: "src/typings/auto-imports.d.ts", include: [/.tsx?$/, /.vue$/], components({ resolvers: [ ElementPlusResolver({ importStyle: "sass" }) 在页面中使用 element-plus组件 然后在组件中使用 v-loading 指令
会有重复的路由 @webfansplz
非常感谢，可以提供一个 github demo 复现仓库吗 🙏
最小化复现 https://github.com/Leovenn/vite-devtools-bug
"vite-plugin-vue-devtools": "^7.2.0", "vant": "^4.9.0", "vue": "^3.4.27", "vue-router": "^4.3.2" "vite": "^5.2.11", 一样的问题 当vant使用过函数引入的toast后就不能跳转了 还以为是vant有问题 同样的__navigationId报错
相同问题 "vite-plugin-vue-devtools": "^7.2.0", "vue": "^3.4.27", "vue-router": "^4.3.2" "element-plus": "^2.7.3", "vite": "^5.2.11",
不使用v-loading 或者 不使用vite-plugin-vue-devtools，问题消失。。。。
