Vue DevTools 为什么检测不到我的 Vue 应用？

Air-博文提问于 2026-03-07 23:56:18 阅读 71

前端

我本地开发一个 Vue 3 项目，用的是 Vite + Composition API，但打开浏览器 DevTools 的 Vue 面板一直显示 “Vue.js is not detected”。明明页面能正常运行，也确认是 Vue 项目，不是生产环境构建的。

我试过在 main.js 里加 app.config.devtools = true，也重启了浏览器和 DevTools 扩展，但还是不行。控制台也没有报错，就是识别不到。是不是 Vue 3 要额外配置什么？

组件开发

我来解答赞 12 收藏

反馈

2 条解答

IT人一诺 Lv1

Vue 3 + Vite 项目确实有时候会遇到 DevTools 检测不到的情况，常见原因和解决方案：

1. 首先确认 Vue DevTools 扩展是最新版，老版本可能不支持 Vue 3

2. 检查 vite.config.js 里是否配置了 define 覆盖了 __VUE_PROD_DEVTOOLS__：

export default defineConfig({

  define: {

    __VUE_PROD_DEVTOOLS__: true // 这个必须设为 true

  }

})

3. 确保你的 main.js 初始化代码是这样的写法：

const app = createApp(App)

app.mount('#app')

// 这个配置其实在开发环境默认就是 true，可以不用写

app.config.devtools = true

4. 如果还是不行，试试这些骚操作：
- 清空浏览器缓存再硬刷新（Ctrl+Shift+R）
- 换 Chrome 的无痕模式试试
- 把 Vue DevTools 扩展卸载重装

5. 终极方案：在项目里加个 debugger 语句看看 Vue 实例是否真的存在：

const app = createApp(App)

window.__VUE_APP__ = app // 暴露到全局

app.mount('#app')

然后在控制台输入 window.__VUE_APP__ 看看能不能获取到实例

我上次遇到这个问题是因为 vite 配置里不小心把 __VUE_PROD_DEVTOOLS__ 覆盖了，折腾了半天才发现... Vue 3 的调试确实比 Vue 2 麻烦些

2026-03-08 06:01

Dev · 怡玥 Lv1

我之前也遇到过，八成是Vue DevTools扩展版本太老了。去Chrome商店装个最新的，然后把原来的删干净。

如果还不行，试试在main.js里这么写：

const app = createApp(App)

app.config.devtools = true

app.mount('#app')

再不行就检查下是不是用了CDN版本的Vue，本地开发别用CDN。

2026-03-08 00:03