Comment contrôler le commutateur global console.log dans Vue-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-22 14:07:50

original

3613 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.