需同时满足开启 Vue dev 模式和暴露全局钩子：在 vue.config.js 中设 mode: 'development'，启动命令加 --mode development，并确保 process.env.NODE_ENV 为 "development"。

uni-app H5 项目怎么让 Vue DevTools 识别到

默认跑 npm run dev:h5 启动的 h5 页面，vue devtools 显示「no vue detected」——根本原因是 uni-app 的 h5 构建默认禁用了 vue 的开发模式标识（process.env.node_env !== 'production' 被覆盖，且 __vue_devtools_global_hook__ 未暴露）。

实操上必须同时满足两个条件：开启 Vue 的 dev 模式 + 确保全局钩子可被 DevTools 注入。

• 在 vue.config.js 中添加：

  module.exports = {
    configureWebpack: {
      mode: 'development',
      devtool: 'source-map'
    }
  }

• 确保 main.js 或入口文件里没有手动设置 Vue.config.productionTip = true 或覆盖 process.env.NODE_ENV
• 启动命令必须带 --mode development（uni-app 3.0+ 推荐用 uni-app@3 的新 CLI）：

  npm run dev:h5 -- --mode development

为什么 Vue.config.devtools = true 不起作用

uni-app 的 H5 编译流程会重写全局 Vue 实例，并在打包时剥离 devtools 相关逻辑。即使你在 main.js 开头写了 Vue.config.devtools = true，它也会被后续构建阶段的代码覆盖或忽略。

真正生效的位置是 webpack 配置里的 definePlugin 和运行时环境变量注入点。

• 检查是否误用了 uni-app 的旧版 build/h5/webpack.config.js（已废弃），新版应统一走 vue.config.js
• 确认 process.env.NODE_ENV 在浏览器控制台输出为 "development"，而不是 "production" 或 undefined
• 如果用了 @dcloudio/uni-cli-shared 1.0.0+，需避免在 vue.config.js 中错误地将 mode 设为 'production'

Chrome 插件显示 “Vue.js is detected” 但组件树为空

这是最常见的假成功现象：DevTools 能看到 Vue 标志，但无法抓取组件实例。根本原因在于 uni-app 的 H5 运行时使用了自定义的 App 包装器和异步组件加载机制，导致 DevTools 的组件发现逻辑失焦。

立即学习“前端免费学习笔记（深入）”；

关键修复点不在前端代码，而在构建产物的挂载时机和全局 Vue 实例暴露方式。

• 确保 main.js 中创建的是标准 new Vue(...) 实例（不是 createSSRApp 或 createApp —— uni-app H5 目前仍基于 Vue 2）
• 不要在 App.vue 的 onLaunch 或 onShow 中动态替换 this.$root 或劫持 $children
• 禁用所有可能干扰 Vue 响应式追踪的插件，比如某些「性能监控 SDK」会在 Vue.prototype 上挂载方法并污染 __ob__

uni-app 3.x + Vue 3 H5 项目怎么配 DevTools

uni-app 3.x 默认支持 Vue 3，但 H5 端的 DevTools 支持仍不完整：Vue DevTools v6 只支持 Vue 3.2+ 的正式版 API，而 uni-app 内部封装的 createApp 并未完全对齐官方 runtime-core 行为。

目前最稳的路径是降级兼容，而非强行启用实验性功能。

• 显式锁定 Vue 版本：

  "dependencies": {
    "vue": "3.2.47"
  }

  （避开 3.3+ 的响应式代理变更）
• 在 vue.config.js 中强制注入 devtools 钩子：

  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        '__VUE_DEVTOOLS_GLOBAL_HOOK__': 'window.__VUE_DEVTOOLS_GLOBAL_HOOK__'
      })
    ]
  }

• 启动后手动在控制台执行：

  Vue.config.devtools = true

  （仅临时生效，用于验证是否可达）

实际连上之后，你会发现组件名显示为 Anonymous Component 或 ProxyComponent——这不是配置失败，而是 uni-app 的编译抽象层导致的命名丢失，属于当前架构下难以绕过的限制。