vue如何禁止打开调试模式方法
作者:object(index)
这篇文章主要介绍了vue如何禁止打开调试模式方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue禁止打开调试模式
//在app.vue添加一下代码 <template> <div id="app"> <router-view></router-view> </div> </template>
<script> export default { name: "App", data() { return {}; }, methods:{ }, mounted() { if (process.env.mode === 'production') { (function noDebugger() { function testDebugger() { var d = new Date(); debugger; if (new Date() - d > 10) { document.body.innerHTML = '<div>管理员已禁用调试模式!!!年轻人,不要太好奇</div>'; alert("管理员已禁用调试模式") return true; } return false; } function start() { while (testDebugger()) { testDebugger(); } } if (!testDebugger()) { window.onblur = function () { setTimeout(function () { start(); }, 500); }; } else { start(); } })(); } }, }; </script>
<style> #app { /* font-family: Avenir, Helvetica, Arial, sans-serif; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; /* width: 100vw; */ height: 100vh; overflow: hidden; box-sizing: border-box; } </style>
vue提供的三种调试方式
一、在 VS Code 中配置调试
使用 Vue CLI 2搭建项目时:
更新 config/index.js 内的 devtool property:
devtool: 'source-map',
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图:
选择 Chrome/Firefox:Launch 环境。
将 launch.json 的内容替换为:
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }, { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] } ] }
开始调试:
设置断点:
#启动项目npm run dev
在debug页面选择“vuejs:chrome”:
二、debugger语句
推荐!!!!!!!!
function potentiallyBuggyCode() { debugger // do potentially buggy stuff to examine, step through, etc. }
浏览器:F12打开DevTools,当运行程序后,会停在debbger语句:
注意:
当安装了Eslint插件时,点击快速修复,Disable no-debugger for this line.
不然,保存时会自动清除debugger语句。
三、Vue Devtools
谷歌浏览器的插件。
详情参考官方链接:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。