在Vue中如何控制全域console.log開關

這篇文章主要為大家介紹了關於Vue根據URL傳參如何控制全局console.log開關的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

前言

最近在學習vue，發現了一個問題網上相關的資訊很少，所以想著總結下，本文主要給大家介紹了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了：

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

做完以上的工作後，在URL後面帶上參數envFlag=monitor 就可以看到組件monitor 被顯示出來，同時開啟控制台的話，就可以看到專案所有的console.log 資訊。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在微信小程如何使用swiper元件實作圖片切換顯示

在vue2.0中有哪些常用的UI 庫？

在C#中如何實作將一個字元轉換為整數

#如何將vue2.0 和animate.css合併在一起使用（詳細教程）

以上是在Vue中如何控制全域console.log開關的詳細內容。更多資訊請關注PHP中文網其他相關文章！