平头小民看新闻 发表于 2024-6-11 11:02:42

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322340hur.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vue如何禁止打开调试模式方法