vue移动端项目调试优雅的引入vconsole

最新推荐文章于 2025-09-23 16:41:00 发布

原创最新推荐文章于 2025-09-23 16:41:00 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #html5

该博客介绍了如何在移动端项目中，通过动态引入vconsole插件并设置自定义指令，实现在生产环境中仅在连续点击10次同一区域时调出vconsole，避免影响用户正常使用。通过在Vue组件中注册指令，监听点击事件，实现了这一功能，确保了调试便利性和用户体验的平衡。

移动端项目经常要在线调试，引入vconsole插件，当生产环境出现故障需要查看接口或数据时，直接引入会影响用户使用，可以通过以下方法优雅地调出vconsole，又不影响正常用户使用。

//src/directives/index.js

/**
 * @description: 动态引入脚本
 * @return {*}
 */
const createScript = (url) => {
  return new Promise((resolve,reject)=>{
    const scriptElement = document.createElement('script');
    document.body.appendChild(scriptElement);
    scriptElement.type = "text/javascript";
    scriptElement.onload = _ => {
      resolve()
      clear()
    }
    scriptElement.onerror = _ => {
      reject()
      clear()
    }

    scriptElement.src = url;

    function clear() {
      // 释放函数
      scriptElement.onload = scriptElement.onerror = null
    }
  })
}


/**
 * @description: 调起Vconsole
 * @return {*}
 */
export const invokeVconsole = () => {
  return createScript("https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.6/vconsole.min.js").then(
    (_) => {
      var vConsole = new VConsole();
    }
  );
};


/**
 * @description: 注册自定义指令：连续点击元素10下调出vconsole
 * @return {*}
 */
var offsetX = 0
var offsetY = 0
const LIMIT = 15 //点击区域范围，限制在15px的正方形区域内
Vue.directive("console", {
  bind: function(el, binding, vnode) {
    var elm = vnode.componentInstance
      ? vnode.componentInstance.$children[0].$el
      : el;
    var counter = 0;
    var timer = null;
    elm.addEventListener("click", e => {
      clearTimeout(timer)
      //加入坐标判断，连续快速点击相同位置才触发
      if (!offsetX) {
        offsetX = e.offsetX
      }
      if (!offsetY) {
        offsetY = e.offsetY
      }
      const diffX = Math.abs(e.offsetX - offsetX)
      const diffY = Math.abs(e.offsetY - offsetY)
      if (diffX < LIMIT && diffY < LIMIT) {
        counter ++
      }
      timer = setTimeout(() => {
        counter = 0
        offsetX = 0
        offsetY = 0
      }, 500)
      if (counter > 9) {
        invokeVconsole()
      }
    })
  }
})

在vue实例挂载的根元素中加入自定义指令，由于页面所有元素的点击事件都会往上冒泡（没有特殊处理禁止冒泡的话），都会触发到id='app'这个div的点击事件，从而实现全局任意空白处连续点击10次，调起vconsole

//src/APP.vue

<template>
  <div v-console id="app">
    <transition mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
    </transition>
  </div>
</template>