vue3.0调试工具vue-devtools在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
}