Vue에서 전역 console.log 스위치를 제어하는 방법-JS 튜토리얼-php.cn

Vue에서 전역 console.log 스위치를 제어하는 방법

亚连

풀어 주다： 2018-06-22 14:07:50

원래의

3647명이 탐색했습니다.

이 글에서는 Vue가 URL 매개변수를 기반으로 전역 console.log 스위치를 제어하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글은 모든 사람의 학습이나 작업에 필요한 특정 참조 학습 가치를 가지고 있습니다. 친구야, 함께 살펴보자.

머리말

최근에 Vue를 배우다가 문제점을 발견했습니다. 온라인에 관련 정보가 거의 없어서 요약하자면 이 글에서는 주로 Vue의 글로벌 콘솔 제어에 대해 소개하겠습니다. URL 전달 매개변수를 통한 로그 전환. 관련 내용은 모든 사람의 참조와 학습을 위해 공유됩니다. 아래에서는 자세한 소개를 살펴보겠습니다.

구현 방법은 다음과 같습니다.

프로젝트 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;
};

로그인 후 복사

링크에 이 매개변수가 포함되어 있으면 디버그 상태를 true로 설정하세요. 이때 console.log는 정상적으로 인쇄 가능한 상태입니다. 그렇지 않으면 디버그 상태를 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의 getter만 사용해야 합니다. debug 변수를 선언하여 사용할 수 있습니다.

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

로그인 후 복사

위 작업을 완료한 후 URL 뒤에 매개변수를 가져오면 envFlag=monitor 콘솔을 열면 구성 요소 모니터가 표시되는 것을 볼 수 있습니다. 동시에 프로젝트의 모든 콘솔 정보를 볼 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue에서 전역 console.log 스위치를 제어하는 ​​방법

Vue에서 전역 console.log 스위치를 제어하는 방법