vue如何禁止打开调试模式方法

平头小民看新闻

vue禁止打开调试模式

1. //在app.vue添加一下代码
   
2. <template>
   
3.   <div id="app">
   
4.     <router-view></router-view>
   
5.   </div>
   
6. </template>

复制代码

1. <script>
   
2. export default {
   
3.   name: "App",
   
4.   data() {
   
5.     return {};
   
6.   },
   
7.   methods:{
   
8.    
   
9.   },
   
10.   mounted() {
    
11.   if (process.env.mode === 'production') {
    
12.         (function noDebugger() {
    
13.                 function testDebugger() {
    
14.                         var d = new Date();
    
15.                         debugger;
    
16.                         if (new Date() - d > 10) {
    
17.                                 document.body.innerHTML = '<div>管理员已禁用调试模式!!!年轻人，不要太好奇</div>';
    
18.         alert("管理员已禁用调试模式")
    
19.                                 return true;
    
20.                         }
    
21.                         return false;
    
22.                 }
    
23. 
    
24.                 function start() {
    
25.                         while (testDebugger()) {
    
26.                                 testDebugger();
    
27.                         }
    
28.                 }
    
29. 
    
30.                 if (!testDebugger()) {
    
31.                         window.onblur = function () {
    
32.                                 setTimeout(function () {
    
33.                                         start();
    
34.                                 }, 500);
    
35.                         };
    
36.                 } else {
    
37.                         start();
    
38.                 }
    
39.         })();
    
40. }
    
41. },
    
42. };
    
43. </script>

复制代码

1. <style>
   
2. #app {
   
3. /* font-family: Avenir, Helvetica, Arial, sans-serif; */
   
4.   -webkit-font-smoothing: antialiased;
   
5.   -moz-osx-font-smoothing: grayscale;
   
6.   color: #2c3e50;
   
7.   /* width: 100vw; */
   
8.   height: 100vh;
   
9.   overflow: hidden;
   
10.   box-sizing: border-box;
    
11. }
    
12. </style>

复制代码

vue提供的三种调试方式


一、在 VS Code 中配置调试

使用 Vue CLI 2搭建项目时：
更新 config/index.js 内的 devtool property：

1. devtool: 'source-map',

复制代码

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：

选择 Chrome/Firefox：Launch 环境。
将 launch.json 的内容替换为：

1. {
   
2.   "version": "0.2.0",
   
3.   "configurations": [
   
4.     {
   
5.       "type": "chrome",
   
6.       "request": "launch",
   
7.       "name": "vuejs: chrome",
   
8.       "url": "http://localhost:8080",
   
9.       "webRoot": "${workspaceFolder}/src",
   
10.       "breakOnLoad": true,
    
11.       "sourceMapPathOverrides": {
    
12.         "webpack:///src/*": "${webRoot}/*"
    
13.       }
    
14.     },
    
15.     {
    
16.       "type": "firefox",
    
17.       "request": "launch",
    
18.       "name": "vuejs: firefox",
    
19.       "url": "http://localhost:8080",
    
20.       "webRoot": "${workspaceFolder}/src",
    
21.       "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    
22.     }
    
23.   ]
    
24. }

复制代码

开始调试：
设置断点：

1. #启动项目npm run dev

复制代码

在debug页面选择“vuejs：chrome”：

二、debugger语句

推荐！！！！！！！！

1. function potentiallyBuggyCode() {
   
2.     debugger
   
3.     // do potentially buggy stuff to examine, step through, etc.
   
4. }

复制代码

浏览器：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】 我们会及时删除侵权内容，谢谢合作！