工具内嵌套页面

[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 回去了

[kcmeven]

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

[barry1102]

我也遇到了这个问题，确实是createHtmlPlugin的顺序问题！！！