关于vue.js:vue30调试工具vuedevtools在chrome不显示

官网文档强制开启办法 vue-devtools

// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'
 
// After you create app
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor
 
// then had to add in ./store.js as well.
Vue.config.devtools = process.env.NODE_ENV === 'development'

这个办法应该还是 vue2.0 的办法

vue3.0 vue-devtools

import {createApp} from 'vue'
import App from './App.vue'
 
const app = createApp(App)
 
// 分环境解决
if (process.env.NODE_ENV === 'development') {if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window) {
  // 这里__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue 赋值一个 createApp 实例
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
  }
  app.config.devtools = true
}
 
app.mount('#app')

这个形式与 vue2.0 的 vue-devtools 会不兼容，控制台会报错，临时敞开 2.0 的 vue-devtools 就能够

调试工具显示后能够正文调这段代码，不然调试工具会多出一个 vue 实例

if (process.env.NODE_ENV === 'development') {// if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window) {
    // window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
  // }
  app.config.devtools = true
}