[Vue3] build 시 console.log 숨기기

ヾ( ͝° ͜ʖ͡°)ノ♪  유후

프로젝트 마감이 다가오니

슬슬 마무리를 하려는데

로컬에서 테스트할 때 "들어왔니?" ㅋㅋ 머이런 로그가 

개발에서도 보여서 npm run build 시엔 console.log를 무시하는

설정이 필요했다.

 

1. 환경변수 설정

우리 프로젝트 경우, 따로 사용하는 babel 플러그인이 없었을 뿐더러

왜인지 모르겠지만 환경변수 설정이 안되어있었다. 내가 원하는 node 모듈을 사용하기 위해선

환경변수 설정하는게 편했다.

 

프로젝트 상단위치에 각각 폴더를 만들었다

* VUE3이상부턴 변수명 앞에 VUE_APP_를 붙이면 node 환경변수로 인지한다.

.env.prd (빌드용)

NODE_ENV="production"
VUE_APP_API_URL=/api/v1
VUE_APP_FILE_URL=""

.env.dev (로컬테스트용)

NODE_ENV="development"
VUE_APP_API_URL=http://localhost:8000/api/v1
VUE_APP_FILE_URL="http://localhost:8000"

2. transform-remove-console 설치

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

3. package.json

npm run serve 시엔 dev 모드로 run 되도록 하고,

build 시엔 prd 모드로 run되도록 설정

  "scripts": {
    "serve": "vue-cli-service serve --disableHostCheck true --mode dev",
    "build": "vue-cli-service build --mode prd",
    "lint": "vue-cli-service lint",
    "test": "npm run lint"
  },

4.babel.config.js

mode가 prd 시엔 설치한 모듈을 플러그인으로 추가

나같은 경우는 error와 warn도 모두 숨기도록 설정하였다.

const removeConsolePlugin = [];
if (process.env.NODE_ENV === "production") {
	removeConsolePlugin.push([
		"transform-remove-console",
		{ exclude: ["error", "warn"] },
	]);
}

module.exports = {
	presets: ["@vue/cli-plugin-babel/preset"],
	plugins: removeConsolePlugin,
};

 

이렇게 해서 npm run build 하면 console.log 내용은 안보인다

시스템 사용자들이 f12를 눌러서 보겠냐마는

그냥 내가 신경쓰여서 설정해보았다.

 

그리고 axios config baseURL 이 로컬테스트와 서버배포 각각 주소가 달라서

배포할때마다 수정해줬는데 환경변수도 설정한 덕분에

그냥 바로 build 하면 끝이다 핵꿀!

 

내자신 너무 멋찌자나 ┌༼▀̿̿Ĺ̯̿̿▀̿༽┘