devServer : overlay : ~ (Webpack5)

completed1991·2022년 6월 26일
0

vue-basic

목록 보기
18/32

vue/cli로 프로젝트 생성 후 ESLint규칙에 의거한 에러성 코드가 발생하면
화면에 overlay형식으로 아무 동작 못하게 막혀버림 ( 생산성 저하 )
그래서 overlay옵션을 꺼주는 방법을 알아보겠다.

webpack 4 기준

module.exports = {
  //...
  devServer: {
    overlay: false,
  },
};

vue/cli 4
npm i @vue/cli@4.5.13

webpack 5 기준

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: false,
        warnings: false,
      },
    },
  },
};


vue/cli가 버전 5를 넘어가면서 webpack5의 기준으로 변경되었다.
https://webpack.kr/configuration/dev-server/#overlay![](https://velog.velcdn.com/images/completed1991/post/fbb1e302-2550-44c0-b5ba-34251a162a9a/image.png)

module.exports = {
	devServer: {
		overlay: false,
		proxy: {
			'/api': {
				target: process.env.VUE_APP_DEV_API,
				//pathRewrite: { '^/': '' },
				changeOrigin: true,
				//secure: false,
			},
		},
	},
}

Webpack 핸드북 참고 (공부용)
https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#%ED%94%84%EB%A1%9D%EC%8B%9C-proxy-%EC%84%A4%EC%A0%95![](https://velog.velcdn.com/images/completed1991/post/608b6c8c-adfe-45c7-9802-00edf49fdfdd/image.png)

0개의 댓글