배포시 console 안보이게 하기 ( with . Vue.js )

 

개발하면서 console찍어가면서 값 확인하고, 테스트 하고 삭제 하는 경우는 수두룩하다

 

특정 console들은 삭제하지 않고 확인용으로 두는 경우들도 있는데,

 

local 환경에서는 아무래도 상관없지만 

배포하고 나서 운영에서는 console이 안보이도록 하는 환경을 구축하는 경우를 정리했다.

transform-remove-console 사용

 

1. transform-remove-console 설치

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

 

2. package.json

script > build > --mode production 추가

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
  }
}

 

 

3.babel.config.js

plugins에 transform-remove-console 추가

removeConsolePlugin에 다른 plugin 있으면 넣어서 활용

const removeConsolePlugin = [기존 사용하던 플러그인 있으면 넣기..]
if(process.env.NODE_ENV === 'production') {
  removeConsolePlugin.push("transform-remove-console")
}
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: removeConsolePlugin
}

! 옵션이 필요하면

exclude 넣기

console 제거시 error랑 warn도 포함하겠다는 옵션

//위 코드 3번째 줄 대체
  removeConsolePlugin.push("transform-remove-console", { "exclude": [ "error", "warn"] })

 

---

✔️참고

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

https://gitabout.com/3