前端项目部署阻止用户打开控制台

最新推荐文章于 2025-06-12 14:59:51 发布

只会应用不懂原理的程序员

最新推荐文章于 2025-06-12 14:59:51 发布

阅读量361

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/m0_71231013/article/details/145861219

需求：在前端开发过程中，会遇到生产坏境不让用户打开控制台，防止不法分子虚假信息操作。

废话不多说一共两步，添加我们的js方法，和在全局使用这个方法。

第一步：添加我的js文件：

//禁用开发者工具
export default async () => {
    if ((localStorage.getItem('devTools') && localStorage.getItem('devTools') === 1) || localStorage.getItem('devTools') === '1') {
        return;
    }
    document.onkeydown = () => {
        //禁用F12
        if (window.event && window.event.keyCode === 123) {
            return false;
            //禁用ctrl+shift+i,
        } else if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode === 73) {
            return false;
            //屏蔽Shift+F10
        } else if (window.event.shiftKey && window.event.keyCode === 121) {
            return false;
        }
    };
    window.oncontextmenu = (e) => {
        e.preventDefault();
    };
    setInterval(function () {
        check();
    }, 1000);

    var check = function () {
        function doCheck(a) {
            if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
                (function () {})['constructor']('debugger')();
            } else {
                (function () {})['constructor']('debugger')();
            }
            doCheck(++a);
        }
        try {
            doCheck(0);
        } catch (err) {
            console.error(err);
        }
    };
    check();
};

第二步：在全局使用，以vue项目为例，在main.js中引用使用

import disableDeveloperTools from '你存放js文件的路径';


app.use(store);
app.use(router);

//判断生产环境使用
if (import.meta.env.MODE === 'production') {
    disableDeveloperTools();
}

app.mount('#app');