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 環(huán)境。

將 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}/" }]
    }
  ]
}

開始調試：

設置斷點：