VueJ 2: 운영 빌드에서 Console.log를 삭제하는 방법

VueJ 2: 운영 빌드에서 Console.log를 삭제하는 방법

IE에서 콘솔은 F12 디버깅모드일 경우에만 정의됩니다.그래서 Vue 컴파일을 관리하기 위한 편리한 방법을 찾고 있습니다.

코드 안에 console.log를 쓸 수 있으면 좋겠습니다.

alert('a');
console.log('only in development mode');
alert('b');

프로덕션 모드에서 컴파일할 경우 명령 콘솔이 사라져야 합니다.

alert('a');
alert('b');

개발 모드에서 작업하는 경우 명령 콘솔이 표시되어야 합니다.

alert('a');
console.log('only in development mode');
alert('b');

VueJ에서는 2개의 Web 팩 구성이 있습니다.하나는 개발용이고 다른 하나는 실가동용입니다.이 방법이 있을까요?

Web pack 파일을 올바르게 설정할 수 없지만, 다음과 같은 것이 있다고 생각합니다.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports.plugins = (module.exports.plugins || []).concat([
 new UglifyJsPlugin({
  sourceMap: true,
  compress: {
    drop_console: true,
    warnings: false
  },
  comments: false
 }),
])

camilos 솔루션은 나에게 효과가 없었지만, 다음과 같이 기능했습니다(vue cli 3.0).

npm i babel-plugin-transform-remove-console --save-dev

babel.config.files:

module.exports = {
  "presets": [...],
  "plugins": [...],
  "env": {
     "production": {
         "plugins": ["transform-remove-console"]
     }
  } 
} 

vue-cli 3을 사용하는 경우 vue-cli 3에 대한 babel 플러그인을 설치할 수 있습니다.npm install babel-plugin-transform-remove-console --save-dev다음 구성을 에 추가합니다.babel.config.js파일:

const removeConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  removeConsolePlugin.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: removeConsolePlugin
}

소스 링크에 이전 버전의 vue-cli에 대한 다른 답변이 있습니다.

출처 : https://forum.vuejs.org/t/remove-console-logs-from-production-buils/39327

추가할 UglifyJsPlugin의 "plugins" 배열에서 build > webpack.prod.conf.js를 엽니다.drop_console: truecompress 옵션에서.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true <----- ADD THIS LINE
  },
  sourceMap: true
})

Camilos 솔루션은 나에게 효과가 없었지만 좋은 힌트였다.몇 가지 조사를 한 결과, 문제는 다음과 같습니다.process.env.NODE_ENV기대했던 대로 채워지지 않았거나 정의되지 않았습니다.

vue 응용 프로그램에 다음과 같은 이름의 자체 환경 파일이 있습니다.

• .env(로컬 환경용)
• .env.devlopment(개발 기계용)
• .env.test(prel의 경우)
• .env.production(물론 생산용)

각 env 파일에는 다음 속성이 포함되어 있습니다.

VUE_APP_STAGE=production
VUE_APP_REST_BASE_URL=http://prodapp/rest
VUE_APP_NOTIFICATION_DURATION_MS=10000

어플리케이션을 구축합니다.예를 들어,npm run build -- --mode development또는npm run build -- --mode local마지막 파라미터는 환경을 지정하여 상기 환경 파일 간의 전환으로 이어집니다.

실가동 빌드에서 콘솔 출력을 회피하는 문제를 수정하여 해결했습니다.babel.config.js다음과 같이 합니다.

const plugins = [];

//remove console outputs in production enviroment!
if (process.env.VUE_APP_STAGE === 'production') {
    plugins.push('transform-remove-console')
}

module.exports = {
    presets: [
        '@vue/app'
    ],
    plugins: plugins
}

Vue CLI 3/4

npm install babel-plugin-transform-remove-console --save-dev

babel.config.js의 경우:

module.exports = {
  presets: [
    'airbnb'
  ],
  plugins: [
    ...process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
  ],
};

여기 있습니다.babel.config.jsVue CLI 4 babel 플러그인을 사용하는 경우@vue/cli-plugin-babel:

/* eslint-disable no-var */
module.exports = (api) => {
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production');
  var plugins = [];
  if (isProd) {
    plugins.push(['transform-remove-console', { exclude: ['error', 'warn', 'info'] }]);
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins,
  };
};

패키지를 개발 종속성으로 설치합니다.npm i -D babel-plugin-transform-remove-console

제가 알기로는 로그 문을 제거할 수 없습니다.조건부로 랩할 수 있습니다.

if (debug === true) {
  console.log('dev')
}

그런 다음 앞서 설명한 대로 웹 팩 설정에서 debug 변수를 설정합니다.

debug = process.env.PRODUCTION !== true

언급URL : https://stackoverflow.com/questions/48502827/vuejs-2-how-to-remove-console-log-from-production-builds