Chrome 中的 Vue devtools：未检测到 Vue.js

Posted 2023-04-13

【中文标题】Chrome 中的 Vue devtools：未检测到 Vue.js

【英文标题】：Vue devtools in Chrome: Vue.js not detected

【发布时间】：2021-03-04 21:06:11

【问题描述】：

我是 Vue 新手，我尝试使用 Vue 3 Composition API，我创建了演示应用程序，它运行良好。

我在 Chrome 中安装了 Vue.js Devtools，但是当我打开我的网站时，我什么也做不了； 它具有灰色/禁用的外观，当我单击它时，我得到工具提示“未检测到 Vue.js”，并且在我的开发人员工具中我没有看到任何关于 Vue 的选项卡或其他任何内容。

编辑：我运行一些本地应用程序，例如“http://localhost:8998/#/home”

EDIT2：哪一个？ IDK，我刚刚用谷歌搜索并选择了用户评分最高的顶部，我添加了一个捕获

【问题讨论】：

你能补充一些细节吗？您如何创建/初始化应用等。

另外，您是否安装了latest Vue Devtools？ Vue 3 有一个新版本

对于 Vue 3，您需要安装 Devtools 的版本 6 beta。链接：v3.vuejs.org/guide/installation.html#vue-devtools

您需要 Vue Devtools 版本 6，而不是 Chrome Devtools。我提供的链接应该会引导您进行相关下载。从您问题中的图片看来，您的问题是错误的。您需要顶部带有橙色beta 徽标的那个。您可能还需要禁用 Devtools 的其他副本（下载页面对此进行了说明）。

谢谢。我试过安装那个测试版，但结果是一样的。我禁用了我使用的其他 2 个扩展（过去所有其他扩展都被禁用）“清除缓存”和“Moesif Origin & CORS Changer”但是，结果是一样的。我打开运行 Vue 解决方案的页面，并打开开发者工具，图标为灰色并显示“未检测到 Vue.js”。我尝试关闭 devtools、关闭选项卡、关闭浏览器等。

【参考方案1】：

信用：skitlele

Vue 2 和 Vue 3 有不同版本的开发工具。确保您使用的是与 Vue 3 兼容的版本。目前是 6.0.0 beta 3。

您还需要使用 Vue 的开发版本，以便开发工具能够与之交互。它不适用于 Vue 的生产版本。

【参考方案2】：

你试过npm run dev吗？您的 Vue 应用程序需要处于开发模式才能显示 Vue 开发工具选项卡。