生产环境如何开启 devtools vue2/vue3_vue.config.devtools = true-优快云博客

生产环境如何开启 devtools 本地开发环境中，devtools 是默认开启的，而生产环境中默认关闭。打包时不建议手动开启该配置。遇到生产环境需要调试的，可通过开发者工具更改配置项临时开启。
一、Vue2 项目中开启
1、打开控制台，输入下列代码，回车执行

let Vue, walker, node;
walker = document.createTreeWalker(document.body, 1);
while ((node = walker.nextNode())) {
   if (node.__vue__) {
       Vue = node.__vue__.$options._base;
       if (!Vue.config.devtools) {
           Vue.config.devtools = true;
           if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__){
               window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
           }
       }
       break;
   }
}
2、关闭控制台，再打开控制台，就有了（注意不要刷新页面）

解释： Vue 项目的根节点(一般是#app)上暴露着实例对象 __vue__ ，通过它可以获取到实例的构造函数，我们将构造函数上的 config.devtools 设置为 true。但这还不够，Vue 官方文档对 devtools 这样注释：务必在加载 Vue 之后，立即同步设置以下内容（Vue.config.devtools = true）。很明显 new Vue({})已经执行，所以我们的配置并没有生效。这时候就需要用到 devtools 提供的属性 __VUE_DEVTOOLS_GLOBAL_HOOK__，该属性暴露在 window 中。通过 window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit(‘init’,Vue)来触发 devtools 初始化。（查看 Vue、Vuex 的源码发现它们也是通过该方法触发 devtools 初始化）。

二、Vue3 项目中开启
1、打开控制台，输入下列代码，回车执行

let vue, node, walker;
walker = document.createTreeWalker(document.body, 1);
while ((node = walker.nextNode())) {
   if (node.__vue_app__) {
       vue = node.__vue_app__;
       if (!vue.config.devtools) {
           vue.config.devtools = true;
           if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
               window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", vue);
           }
       }
       break;
   }
}
2、关闭控制台，再打开控制台，就有了（注意不要刷新页面）

解释： Vue3开启的思路和Vue2很相似。但是这里少了找构造函数的步骤，拿到实例后直接改配置config.devtools = true ，再通过emit方法触发init就可以启动devtools了。甚至传入的参数是实例而非构造函数。这里面的原理我还没参透，有知道的可以指点一下我，十分感谢！

原文链接：https://blog.youkuaiyun.com/m0_50395119/article/details/128428667