vue3 +vite项目页面防f12，防打开控制台

概要

vue3 +vite项目页面防f12，防打开控制台

技术细节

第一步 禁用浏览器的默认行为；在main.js里面app.mount之后引入

(function(){

   // 在应用挂载后，禁用右键菜单

window.addEventListener('contextmenu', event => event.preventDefault()); // 阻止右键菜单



window.addEventListener('keydown', function(event) {

    // 阻止F12打开控制台

    if (event.key === 'F12') {

        event.preventDefault();

    }

    // 阻止Ctrl + Shift + I打开控制台

    if (event.ctrlKey && event.shiftKey && event.key === 'I') {

        event.preventDefault();

    }

    // 阻止Ctrl + Shift + J打开控制台

    if (event.ctrlKey && event.shiftKey && event.key === 'J') {

        event.preventDefault();

    }

    // 阻止Ctrl + Shift + C打开控制台

    if (event.ctrlKey && event.shiftKey && event.key === 'C') {

        event.preventDefault();

    }

    // 阻止Cmd + Opt + I (Mac)打开控制台

    if (event.metaKey && event.altKey && event.key === 'I') {

        event.preventDefault();

    }

});



})()

第二步借鉴文档原文地址找不到了

创建detectDevTools.js

export function detectDevTools() {
  // 方法1: 检测 window.devtools 或 __VUE_DEVTOOLS_GLOBAL_HOOK__
  if (window.devtools || (window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit)) {
    return true;
  }

  // 方法2: 利用 console.log 的行为差异
  // 在某些浏览器中，当控制台打开时，console.log 的参数引用会被保留
  let devtoolsOpen = false;
  const threshold = 100; // 阈值，单位为毫秒

  const start = performance.now();
  // @ts-ignore
  console.log('%c', () => {
    devtoolsOpen = true;
  });
  const end = performance.now();

  if (end - start > threshold) {
    devtoolsOpen = true;
  }

  // 清空刚才的 log，避免污染控制台
  console.clear();

  return devtoolsOpen;
}

// 持续检测的函数
export function monitorDevTools(options = {}) {
  const {
    interval = 1000, // 检测间隔
    onOpen = () => {
      var callbacks = [],
        timeLimit = 50,
        open = false;
      setInterval(loop, 1);
      return {
        addListener: function (fn) {
          callbacks.push(fn);
        },
        cancleListenr: function (fn) {
          callbacks = callbacks.filter(function (v) {
            return v !== fn;
          });
        }
      }
      function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
          if (!open) {
            callbacks.forEach(function (fn) {
              fn.call(null);
            });
          }
          open = true;
          window.stop();
          window.location.reload();
        } else {
          open = false;
        }
      }
    }, // 检测到打开时的回调
    onClose = () => { } // 检测到关闭时的回调
  } = options;

  let isOpen = false;

  const check = () => {
    const currentOpen = detectDevTools();
    if (currentOpen && !isOpen) {
      isOpen = true;
      onOpen();
    } else if (!currentOpen && isOpen) {
      isOpen = false;
      onClose();
    }
  };

  // 立即执行一次
  check();

  // 设置定时器，持续检测
  const intervalId = setInterval(check, interval);

  // 返回一个函数，用于停止检测
  return () => clearInterval(intervalId);
}

在app.vue里面使用

import { monitorDevTools } from './detectDevTools.js';

onMounted(() => {
    // 开始监控开发者工具
    stopMonitoring = monitorDevTools({});
   
});


onUnmounted(() => {
  // 组件卸载时，停止监控
  if (stopMonitoring) {
    stopMonitoring();
  }
});

小结