生产环境如何开启 devtools vue2/vue3

生产环境如何开启 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://juejin.cn/post/6979255974959775757