如何在生产环境开启dev-tools

vue生产环境如何开启 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了。甚至传入的参数是实例而非构造函数。这里面的原理我还没参透，有知道的可以留言，谢谢啦。