Comment contrôler le commutateur global console.log dans Vue

Cet article vous présente principalement les informations pertinentes sur la façon dont Vue contrôle le commutateur global console.log en fonction des paramètres d'URL. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. ceux qui en ont besoin peuvent venir jeter un oeil ci-dessous.

Préface

J'apprenais vue récemment et j'ai trouvé un problème Il y a très peu d'informations pertinentes sur Internet, alors j'ai pensé à résumer. Cet article est principalement destiné à Nous avons introduit le contenu pertinent sur Vue passant des paramètres via une URL pour contrôler le commutateur global console.log, et l'avons partagé pour votre référence et votre étude. Je ne dirai pas grand-chose ci-dessous, suivons l'éditeur pour. jetez un œil à l’introduction détaillée.

La méthode de mise en œuvre est la suivante :

Si votre projet console.enregistre beaucoup d'informations, mais que vous ne souhaitez pas imprimer lorsque vous l'envoyez à l'environnement de production Informations, vous devez alors définir une variable globale, telle que : debug,

Utilisez des expressions régulières pour faire correspondre les paramètres :

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

Lorsque le Le lien contient ce paramètre, définissez le statut de débogage sur true, puis console.log est dans l'état imprimable normal, sinon définissez le statut de débogage sur false, puis réécrivez la fonction console.log :

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

Le global La variable à ce moment peut être utilisée tout au long du projet. Le projet est utilisé pour contrôler l'affichage et le masquage de certaines fenêtres de débogage.

Dans Vue, vous pouvez l'écrire directement dans stores/index.js Bien sûr, vous pouvez également l'écrire dans d'autres fichiers d'entrée :

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

À ce moment-là, si vous le souhaitez. pour contrôler l'affichage d'un composant Ou caché, il suffit de le déclarer dans les getters de vuex pour utiliser la variable debug :

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

Après avoir terminé le travail ci-dessus, ajoutez le paramètre envFlag=monitor après le L'URL permettant de voir le moniteur de composants s'affiche et si vous ouvrez la console en même temps, vous pouvez voir toutes les informations console.log du projet.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser le composant swiper pour obtenir un affichage de changement d'image dans le mini-programme WeChat

Qu'y a-t-il dans vue2.0 Bibliothèques d'interface utilisateur couramment utilisées ?

Comment convertir un caractère en entier en C#

Comment fusionner vue2.0 et animate.css ensemble (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!