调试生产Vue

线上环境如何开启 vue devtools

方法一

打开控制台,运行一下以下代码

var 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);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}

显示 vue devtools now is enabled

证明我们已经成功开启了 vue devtools
F12打开，发现多了Vue选项卡，可调试生产vue组件

方法二

chrome应用商店下载插件vue force dev
打开element ui网站，F12 多了Vue选项卡，同样可调试生产vue组件

目前还未找到调试vue3生产的方式，如有知道的欢迎下方留言