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

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

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

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

//禁用开发者工具
export default async () => {if ((localStorage.getItem('devTools') && localStorage.getItem('devTools') === 1) || localStorage.getItem('devTools') === '1') {return;}document.onkeydown = () => {//禁用F12if (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');