How to control the global console.log switch in Vue

This article mainly introduces you to the relevant information about how Vue controls the global console.log switch based on URL parameters. The article introduces it in detail through sample code, which has certain reference learning value for everyone's study or work. Friends who need it can come and take a look below.

Preface

I was learning vue recently and found a problem. There is very little information on the Internet, so I thought of summarizing it. This article mainly gives We have introduced the relevant content about Vue passing parameters through URL to control the global console.log switch, and shared it for your reference and study. I won’t say much below, let’s follow the editor to take a look at the detailed introduction.

The implementation method is as follows:

If your project console.logs a lot of information, but you don’t want to print it when you send it to the production environment Information, then you need to set a global variable, such as: debug,

Use regular expressions to match the parameters:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};

When the link contains this parameter, set the debug status to true. At this time, console.log is in the normal printable state. Otherwise, set the debug status to false. At this time, rewrite the console.log function:

console.log = function () {
 return false;
}

The global variable at this time can be used in the entire project. Used to control the display and hiding of some debugging windows.

In Vue, you can write it directly in stores/index.js. Of course, you can also write it in other entry files:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};
/* 若链接后面带上参数 envFlag=monitor
 * 则将 debug 置为true，否则置为false
*/
const monitor = 'monitor';
const envFlag = getQueryStr('envFlag');
let debug = monitor ? true : false;
if (envFlag === 'monitor') {
 console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");
 debug = monitor;
} else {
 debug = '';
 console.log = function () {
 return false;
 }
}
const state = {debug: debug};
export const store = new vuex.Store({state, mutations});

At this time, if you want to control the display or hiding of a component , you only need to declare it in the getters of vuex to use the variable debug:

<monitor v-show="debug"></monitor>
vuex: {
 getters: {
 debug: state => state.debug
 }
}

After completing the above work, add the parameter envFlag=monitor after the URL and you can see The component monitor is displayed, and if you open the console at the same time, you can see all the console.log information of the project.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the swiper component to achieve image switching display in WeChat Mini Program

What are there in vue2.0 Commonly used UI libraries?

How to convert a character into an integer in C

#How to merge vue2.0 and animate.css together (details Tutorial)

The above is the detailed content of How to control the global console.log switch in Vue. For more information, please follow other related articles on the PHP Chinese website!