vue.config.js 파일의 productionSourceMap 의미 & process.env.NODE_ENV 설정

vue.config.js 설정에서 아래와 같이 productionSourceMap 을 true/false 로 설정하는 경우가 있다.

ex) vue.config.js

module.exports = {
  productionSourceMap: false,
}

 

해당 설정이 true 인 경우에는 배포를 위해 scripts 의 build 명령을 시행하게 되면

$ npm run build

 

ex) package.json

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

 

dist 폴더 아래에 js.map 이라는 파일이 추가되는데 이 파일을 통해 사이트 디버깅이 가능하여 보안에 취약해진다.  

 

따라서 운영모드인 경우에는 productionSourceMap 의 설정을 false 로 두어 해당 파일의 생성을 방지한다.

productionSourceMap: false 로 둔 뒤 아래 명령어를 package.json 에 등록 후 시행시키면 js.map 파일이 사라진다.

 

또한 vue-cli-service 뒤의 명령어에 따라 기본 모드가 다른데 아래와 같다.

# development mode
$ vue-cli-service serve

# production mode
$ vue-cli-service build

 

그리고 운영환경에 따라

개발 환경에서 빌드시에는 productionSourceMap: true 로

운영 환경에서 빌드시에는 productionSourceMap: false 로 주고 싶을 때가 있다.

이럴때는 간단히 아래와 같이 설정하면 된다.

ex) vue.config.js (production 즉, 운영모드일때만 false)

module.exports = {
    productionSourceMap: process.env.NODE_ENV !== 'production',
}