edge安装Vue.js devtools插件无法显示问题

学习vue过程中，在安装插件完成之后我发现无法显示vue标签页，我找了很多办法，最终发现自己忽略了一个版本问题：

1. Vue DevTools 6.x 主要支持 Vue 3

   • Vue DevTools 6.0+ 版本 是专为 Vue 3 重构的，对 Vue 2 的兼容性可能有限。

   • 如果你在 Vue 2 项目中使用 DevTools 6.x，可能会出现检测不到 Vue 实例的情况（如 Vue: null）。

2. Vue 2 需要 Vue DevTools 5.x

   • Vue 2 项目应使用 Vue DevTools 5.x（如 5.3.4），而不是 6.x。

3. 扩展版本冲突

   • 如果你同时安装了 Vue DevTools 5 和 6，可能会导致冲突，Edge 可能只加载其中一个。

解决方案

1. 针对 Vue 2 的解决方案

(1) 降级 Vue DevTools 至 5.x

• 卸载当前 6.x版本：

  1. 打开 edge://extensions/。

  2. 找到 Vue DevTools，点击 移除。

• 安装 Vue DevTools 5.x：

  1. 从 GitHub Releases 下载 5.x的 CRX 文件。

  2. 在 edge://extensions/ 中启用 开发者模式，拖入 CRX 文件安装。

2. 针对 Vue 3 的解决方案

如果 Vue 3 能正常显示 DevTools，但 Vue 2 不行，说明 扩展本身没问题，只是不兼容 Vue 2。

• 推荐方案：

  • Vue 2 项目 → 使用 Vue DevTools 5.x。

  • Vue 3 项目 → 继续使用 Vue DevTools 6.x。

 (以上是我遇到的问题的解决方案，仅供参考）