VueはURLからグローバルconsolie.logのスイッチをどうやって制御しますか?


前言
最近vueを勉強していますが、インターネットに関する情報が少ないことが分かりましたので、まとめたいと思います。VueについてはURLを通じて全体のコンサート・ソロ・ロゴスイッチをコントロールするという内容を紹介します。
実現方法は以下の通りです。
もしあなたのプロジェクトの中でconsolie.logは多くの情報を持っていますが、生産環境に送ってもこれらの情報を印刷したくないです。この時はグローバル変数を設定します。
正則でパラメータを合わせます。

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とします。このとき、consolone.logは正常に印刷可能な状態です。そうでないと、debugの状態をfalseとして設定します。このとき、Cosolone.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: {
 debug: state => state.debug
 }
}
以上の作業を終えたら、URLの後ろにパラメータを持ってenvFlag=monitorでコンポーネントmonitorが表示され、同時にコンソールを開くと、プロジェクトのすべてのconsolie.log情報が見られます。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。