Vue根据URL传参来控制全局 console.log 的开关

如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，

用正则匹配一下参数：

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;

};

当链接中含有这个参数时，将debug的状态置为true，这时console.log是正常可打印状态，否则将debug的状态置为false，

这时重写console.log函数：

console.log = function () {

return false;

}

这时的全局变量就可以用在整个项目中了，用来控制一些调试窗口的显隐。

在Vue中可以直写在stores/index.js中,当然，写在其他入口文件里也可以：

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});

这时候如果你想控制一个组件的显示或隐藏，只需要在vuex的getters中声明一下就可以使用变量debug了：

vuex: {

getters: {

<span style="color: #ff0000;">debug: state => state.debug</span>

}

做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话，

就可以看到项目所有的 console.log 信息。

打赏赞(0)