关于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
}