VUE WEB端如何防止用户打开调试模式（F12）

1.首先我们需要注意的是用户在打开网页是就已经打开调试模式我们需要如何检测页面是否打开调试窗口，因为浏览器的安全策略通常会阻止网站检测这种类型的信息，所以我们需要通过一些特殊手段来实现。

实现方法：在APP.vue文件中添加mounted生命周期里面，此时元素已经挂载完成

        let outerWidth = window.outerWidth;
        let innerWidth = window.innerWidth;
        let outerHeight = window.outerHeight;
        let innerHeight = window.innerHeight;
        //如果窗口外部高度-内部高度大于200，或者外部宽度-内部宽度大于200，就跳转到about:blank
        if (outerHeight - innerHeight > 200 || outerWidth - innerWidth > 200) {
          window.location.href = 'about:blank';
        }

bug1：在输入网址后，快速打开f12，此时网站还没有加载完全，返回的屏幕宽度和屏幕内部宽度是一样的，但是当我使用setTimeOut做延时处理的时候获取到的宽度又不一样，是打开调试窗口之后的宽度

bug2：窗口的外宽/高度可能在输入网址后，快速打开f12情况下出现0，所以这里使用的时候获取屏幕的宽/高度

总结：在网址加载前打开浏览器调试工具，可能出现程序的内部宽/高度已经挂载完成，调试窗口才打开，获取不到最新的内部宽/高度，所以最好使用延时获取最准确的，大于200的值也是测试后的一个比较好的一个值，因为一些css可能会影响到屏幕的内部宽/高度(需要排除)。

 let screenWidth = window.screen.width;
    let innerWidth = window.innerWidth;
    let screenHeight = window.screen.height;
    let innerHeight = window.innerHeight;
    console.log("width",screenWidth,window.outerWidth,innerWidth)
    setTimeout(()=>{
      console.log("rWidth", window.screen.width,window.outerWidth,window.innerWidth)
    })

改良后的代码：

setTimeout(()=>{
        let screenWidth = window.screen.width;
        let innerWidth = window.innerWidth;
        let screenHeight = window.screen.height;
        let innerHeight = window.innerHeight;
        //如果窗口外部高度-内部高度大于200，或者外部宽度-内部宽度大于200，就跳转到about:blank
        if (screenWidth - innerHeight > 200 || screenHeight - innerWidth > 200) {
          window.location.href = 'about:blank';
        }
      },200)

2.然后就是在网页打开之后可以禁用右键菜单，和键盘敲击f12按钮

 //监听用户敲击键盘事件
      window.addEventListener('keydown',this.handleKeydown);
      //阻止右键打开菜单
      document.oncontextmenu = function(event) {
        event.preventDefault();
      };

 methods:{
    handleKeydown(event) {
      //如果键盘敲击f12就阻止f12打开，然后弹框提醒，这个都放在app.vue里面，当然在页面还没有加载的时候最好在index.html里面也加上对应的方法
        if (event.key === 'F12') {
        event.preventDefault(); // 阻止F12的默认行为
        Modal.error({
          title:'警告',
          content:'检测非法调试，F12被管理员禁用',
          okText:'知道了'
        })
      }
    }
  },