如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，
用正则匹配一下参数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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了： <monitor v-show="debug"></monitor> vuex: { getters: { <span style="color: #ff0000;">debug: state => state.debug</span> } } 做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话， 就可以看到项目所有的 console.log 信息。 |
