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

 更新时间:2024年06月06日 15:40:42   作者: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

总结

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

相关文章

  • vue项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 在Vue组件上动态添加和删除属性方法

    在Vue组件上动态添加和删除属性方法

    下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue Ref全家桶具体用法详解

    Vue Ref全家桶具体用法详解

    ref用来辅助我们获取DOM元素或组件的引用实例对象,每个vue的组件实例上,都包含一个refs对象,里面存储着对应的DOM元素或组件的引用,默认情况下,组件的refs指向一个空对象
    2023-03-03
  • vue滑动吸顶及锚点定位的示例代码

    vue滑动吸顶及锚点定位的示例代码

    这篇文章主要介绍了vue滑动吸顶及锚点定位的示例代码,代码简单易懂,非常不错对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    这篇文章主要介绍了vue中使用element-ui进行表单验证的实例代码,本文给大家分享实现思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue3.x中apollo的使用案例代码

    vue3.x中apollo的使用案例代码

    这篇文章主要介绍了vue3.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的,本文给大家介绍了前端获取到apollo数据的过程,需要的朋友可以参考下
    2023-02-02
  • Vue中key的具体使用

    Vue中key的具体使用

    在vue中,key是dom对象的标识,本文主要介绍了Vue中key的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • electron-vue利用webpack打包实现多页面的入口文件问题

    electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验,需要的朋友可以参考下
    2019-05-05
  • vue实现拍照或录像的示例代码

    vue实现拍照或录像的示例代码

    这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • 浅谈Vue3中key的作用和工作原理

    浅谈Vue3中key的作用和工作原理

    本文主要介绍了Vue3中key的作用和工作原理,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论