console.log 없이 vuej 로그인

console.log 없이 vuej 로그인

VueJ를 개발하는 동안 콘솔 로깅을 사용하고 싶지만 운영 환경에서는 사용하지 않도록 설정해야 합니다.

모듈이 있습니다.vuejs-loggerVue 컴포넌트 내에서 정상적으로 동작하며 운영 모드에서는 비활성화됩니다.그러나 서비스 파일이나 라이브러리 파일(Vue 인스턴스 외부)이나 Vuex에서는 작동하지 않습니다.

다른 의견 있으신가요?Vuejs 통합 여부

안전해, TIA

편집: 명확하게 하기 위해 vuejs-logger 타입 스크립트의 통합이 진짜 문제입니다.TS 에러가 너무 많아 사용할 수 없습니다.실제 JS 로깅이 작동하는 것 같습니다.저는 여전히 원활하게 작동할 수 있는 다른 솔루션에 관심이 있습니다.

다음과 같은 웹 팩을 사용하는 경우 어디에서나 사용할 수 있는 간단한 래퍼를 직접 작성하는 것을 고려해 보십시오.

declare const NODE_ENV: any;

export function log(message: String, level?: 'info' | 'warn' | 'error') {

    // WHEN RUNNING WEBPACK WITH `PRODUCTION` build,
    // IT WILL REMOVE FOLLWOING CODE.

    if (NODE_ENV !== 'production') {

        if (level === 'error') {
            console.error(message);
        } else if (level === 'warn') {
            console.warn(message);
        } else {
            console.log(message);
        }
    }
}

단순한 기능이기 때문에 컴포넌트 파일이나 기타 비컴포넌트 파일을 포함하여 코드의 임의의 장소에 Import할 수 있습니다.여기서 중요한 점은 다음 사용법에 주목하는 것입니다.NODE_ENV이 변수는 운영 모드에서 실행할 때 웹 팩에 의해 주입됩니다.마찬가지로 롤업 및 기타 번들러에 대해서도 설정이 존재합니다.자세한 내용은 여기를 참조하십시오.웹 팩이 코드를 프로덕션 모드로 번들할 때 내부 코드를 무시합니다.if (NODE_ENV !== 'production') { /* some code */ }건설하다.

또한 플러그인 내에서 래핑하여 모든 컴포넌트 인스턴스에서 사용할 수 있도록 해야 하는 경우this포인터:

const MyLogger = {
    install(Vue: Vue, options: any) {

        // Add an instance method
        Vue.prototype.log = log;
    }
};

Vue.install(MyLogger);

물론 TypeScript를 사용하는 경우 다음과 같이 모듈 증강을 사용하여 TypeScript를 가르쳐야 합니다.

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
        log(message: string, level?: 'info' | 'warn' | 'error'): void;
    }
}

위의 스니펫은 고객님의 고객님의 고객님의typings폴더와 같은 지정 방법tsconfig.json디렉토리 경로는 다음과 같습니다.ROOT/typings/vue/index.d.ts.

인tsconfig.json파일,typings어레이는 다음과 같이 설정해야 합니다.

"typeRoots": [
    "./node_modules/@types",
    "./typings"
],

또, 를 사용할 수도 있습니다.vuejs3-logger컴포넌트가 아닌 모듈의 경우.필요한 순서는 다음과 같습니다.

1. 모듈을 작성하다logger.js만족하여

import VueLogger from 'vuejs3-logger'
import { createApp } from 'vue'

const isProduction = process.env.NODE_ENV === 'production';

const vlOptions = {
    isEnabled: true,
    logLevel : isProduction ? 'info' : 'debug',
    stringifyArguments : false,
    showLogLevel : true,
    showMethodName : true,
    separator: '|',
    showConsoleColors: true
};

// create a dummy app that can be used as logger in other js modules
const app = createApp({})
app.use(VueLogger, vlOptions);
const logger = app.config.globalProperties.$log;

export {VueLogger, vlOptions, logger};

2. 이를 사용하여 평소처럼 Vue 앱을 만듭니다.

import {createApp} from 'vue'
import {VueLogger, vlOptions} from './logger.js'
import App from '../components/App.vue'

createApp(App)
  .use(VueLogger, vlOptions)
  .mount('#app');

3. 외부 JavaScript 모듈에서 다음을 수행합니다.

import {logger} from './logger.js'

logger.debug("Hi there!")

포인트는 에서 로깅레벨을 변경할 때logger.js모든 JavaScript 모듈도 이 로깅 수준에 맞게 조정됩니다.

언급URL : https://stackoverflow.com/questions/60634393/logging-in-vuejs-without-console-log