工具内嵌套页面

[Yolo-00]

版本 "vite-plugin-vue-devtools": "^7.0.17",

为什么会出现这样的情况？
需要怎么去改动？

[webfansplz]

7.0.16 会出现这个问题吗？方便提供一个最小复现吗 🙏

[Yolo-00]

更新为 7.0.16 和 7.0.15 也一样

"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.3.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.3.5",
"dayjs": "^1.11.7",
"element-plus": "^2.3.3",
"lodash": "^4.17.21",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"picocolors": "^1.0.0",
"pinia": "^2.0.34",
"pinia-plugin-persistedstate": "^3.1.0",
"qs": "^6.11.1",
"sass": "^1.62.0",
"unocss": "^0.58.0",
"vite-plugin-cdn-import": "^0.3.5",
"vue": "^3.2.47",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@commitlint/cli": "17.6.5",
"@commitlint/config-conventional": "17.6.5",
"@intlify/unplugin-vue-i18n": "^0.10.0",
"@types/lodash": "^4.14.195",
"@types/node": "^18.16.1",
"@types/nprogress": "^0.2.0",
"@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.59.1",
"@vitejs/plugin-vue": "^4.1.0",
"eslint": "^8.39.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.11.0",
"husky": "^8.0.3",
"lint-staged": "12.4.2",
"postcss": "^8.4.23",
"postcss-preset-env": "^8.5.0",
"prettier": "^2.8.8",
"rimraf": "^5.0.1",
"rollup-plugin-visualizer": "^5.9.0",
"typescript": "^4.9.3",
"vite": "^4.2.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-devtools": "^7.0.15",
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vue-tsc": "^1.2.0"
},
"engines": {
"node": ">=16.0.0"
}

vite.config.ts

import VueDevTools from "vite-plugin-vue-devtools";
plugins: [ ... VueDevTools() ],

[Yolo-00]

弄了个demo使用最新的也没出现这种情况
不知道是不是和某个依赖库冲突导致的

[webfansplz]

我这边无法复现，需要麻烦提供下可复现 Demo 🙏

[Yolo-00]

目前通过更新部分依赖库的方式解决了这个问题
如果想复现这个问题我这边可以提供

https://github.com/Yolo-00/work-template/commits/master/

1. 拉取代码
2. 版本回退到201528efa029f6282ff250be310191ac024b32cb
3. 安装依赖
4. 运行代码就可以复现

[verynong]

我的也是，写着写着这样了（还没找到原因

[duowb]

@Yolo-00 清除一下浏览器缓存试试看呢？或者换一个端口试试看？

[s3xysteak]

已知一种导致这个的原因是，错误地使iframe嵌套：

<script setup>
// App.vue
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    兄弟别回头，我在<input v-model="count">
    <div>
      <!-- 不存在`me!`因此被重定向回到App入口，造成嵌套 -->
      <iframe src="me" />
    </div>
  </div>
</template>

[webfansplz]

目前通过更新部分依赖库的方式解决了这个问题 如果想复现这个问题我这边可以提供 https://github.com/Yolo-00/work-template/commits/master/

1. 拉取代码
2. 版本回退到201528efa029f6282ff250be310191ac024b32cb
3. 安装依赖
4. 运行代码就可以复现

Vue DevTools 的实现跟 vite-plugin-html 插件的一些逻辑有冲突，在你的项目里可以在注册 vite-plugin-html 插件前先注册 Vue DevTools 就可以正常使用：

plugins: [
 VueDevTools(),
  createHtmlPlugin({
 }),
],

[webfansplz]

我的也是，写着写着这样了（还没找到原因

你的项目有使用 vite-plugin-html 插件吗？方便提供一个可复现吗 🙏

[verynong]

我的也是，写着写着这样了（还没找到原因

你的项目有使用 vite-plugin-html 插件吗？方便提供一个可复现吗 🙏

我也用了vite-plugin-html，按照你说的vite-plugin-html 插件前先注册 Vue DevTools 就可以正常使用了。感谢

[Azurewarth0920]

devtool-next 开发热更新的时候也遇到过类似的问题。

可能的原因：

1. devtool 无法注册 URL /__devtool__
2. iframe 中 /__devtool__ fallback 到 /
3. / 中的 overlay 被激活， overlay 继续去获取 /__devtool__
4. /__devtool__ 继续被 fallback 到 / 导致无限嵌套

[webfansplz]

devtool-next 开发热更新的时候也遇到过类似的问题。

可能的原因：

1. devtool 无法注册 URL /__devtool__
2. iframe 中 /__devtool__ fallback 到 /
3. / 中的 overlay 被激活， overlay 继续去获取 /__devtool__
4. /__devtool__ 继续被 fallback 到 / 导致无限嵌套

是的，1 的话如果其他插件也注册了路径冲突 (e.g. /) 的中间件就会有问题，比如 vite-plugin-html，这样在用法上就需要在顺序上注意。另外开发环境热重载 fallback 到 / 的问题应该比较少，原因应该是 sync client 产物的时候有问题，中间件挂载 client 静态资源的时候没找到 fallback 回去了

[k983551019]

确实是这个问题，调换一下顺序就好了