- 현상 : Vue-CLI 의 default setting 을 이용하면 브라우저에서 소스 코드가 노출된다.
- 이유 : WebPack 은 원본 소스 코드와 구조를 보여주는 'source maps'을 생성하기 때문이다.
- 해결 :
vue.config.js 편집
productionSourMap 만을 false로 바꾸더라도, webpack 옵션을 바꾸지 않으면 동작하지 않는다.
Webpack configuration 은 mode, devtool 을 수정
mode 는 default 로 개발 모드이므로, 배포시에는 produciton 으로 해야함.
devtool 은 sourceMap을 보여주지 않는 옵션을 선택하면 될 듯.
module.exports = {
productionSourceMap: false,
configureWebpack: {
mode: 'production',
devtool: 'eval'
}
};
stackoverflow.com/questions/49096454/how-to-remove-webpack-from-sources-in-the-browser
(참고)
How to remove webpack:// from sources in the browser
I am using this webpack template for a Vue.JS website. I deployed the app and it works well, but if you go to developer tools > Sources in Chrome, then under webpack:// you can see the components...
stackoverflow.com
cli.vuejs.org/config/#integrity
(참고)
Configuration Reference | Vue CLI
Configuration Reference Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with yo
cli.vuejs.org
