So steuern Sie den globalen Schalter console.log in Vue

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen darüber ein, wie Vue den globalen Console.log-Schalter basierend auf URL-Parametern steuert. Der Artikel stellt ihn detailliert anhand von Beispielcode vor, der einen gewissen Referenz-Lernwert für jedermanns Studium oder Arbeit hat Wer es braucht, kann unten vorbeischauen.

Vorwort

Ich habe kürzlich Vue gelernt und festgestellt, dass es im Internet nur sehr wenige relevante Informationen gibt, also habe ich darüber nachgedacht, es zusammenzufassen Dieser Artikel ist hauptsächlich dafür gedacht. Wir haben den relevanten Inhalt über die Übergabe von Parametern durch Vue zur Steuerung des globalen Console.log-Schalters vorgestellt und ihn für Ihre Referenz und Ihr Studium weitergegeben. Folgen wir dem Herausgeber Schauen Sie sich die ausführliche Einführung an.

Die Implementierungsmethode ist wie folgt:

Wenn Ihre Projektkonsole viele Informationen protokolliert, Sie sie aber nicht drucken möchten Wenn Sie es an die Produktionsumgebung senden, müssen Sie eine globale Variable festlegen, z. B. debug,

Verwenden Sie reguläre Ausdrücke, um die Parameter abzugleichen:

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

Wenn der Link enthält Setzen Sie den Debug-Status zu diesem Zeitpunkt auf „true“. Andernfalls setzen Sie den Debug-Status auf „false“:

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

Die globale Variable kann zu diesem Zeitpunkt im gesamten Projekt verwendet werden, um die Anzeige und das Ausblenden einiger Debugging-Fenster zu steuern.

In Vue können Sie es direkt instores/index.js schreiben. Natürlich können Sie es auch in andere Eintragsdateien schreiben:

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

Zu diesem Zeitpunkt, wenn Sie es kontrollieren möchten Um eine Komponente anzuzeigen oder auszublenden, müssen Sie sie nur in den Gettern von Vuex deklarieren, um die Variable debug zu verwenden:

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

Nach Abschluss der obigen Arbeit fügen Sie den Parameter envFlag=monitor nach der URL hinzu und Sie können Sehen Sie sich den angezeigten Komponentenmonitor an. Wenn Sie gleichzeitig die Konsole öffnen, können Sie alle console.log-Informationen des Projekts sehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die Swiper-Komponente, um die Bildwechselanzeige im WeChat Mini-Programm zu erreichen

Was gibt es in vue2 .0 Häufig verwendete UI-Bibliotheken?

So konvertieren Sie ein Zeichen in eine Ganzzahl in C#

So führen Sie vue2.0 und animate.css zusammen (Details Tutorial)

Das obige ist der detaillierte Inhalt vonSo steuern Sie den globalen Schalter console.log in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!