[Vue.js] Vue2 IE 지원하기 (2)

🔍 IE 지원 동기 및 시작 방법은 이전 글을 참고해 주세요

2024.01.30 - [Study] - [Vue.js] Vue2 IE 지원하기 (1)

[Vue.js] Vue2 IE 지원하기 (1)

 

---

IE 버전 바꾸기

지난번 IE11에서 여는 것까지는 성공

이제 IE10과 IE9 모드로 변경하여 확인하기 위해 모드 설정 방법 찾아보았다.

 

개발자 도구를 통해 변경하여 거의 동일하지만 두 가지 방법으로 변경할 수 있다.

1. 노랗게 칠한 부분에서 문서모드를 변경하기

우측 상단의 미리 보기 같은 화면에서 문서 모드를 변경할 수 있다.

 

2. 애뮬레이션에서 문서 모드 변경하기

에뮬레이션 창에서 문서 모드와 다른 설정들을 변경할 수 있다.

이제 IE10과 IE9으로 문서 모드를 바꿔 테스트해보자.

 

IE10에서는 IE11처럼 문제없이 잘 되었는데 IE9로 변경하니, 에러가 뜨며 렌더링이 되지 않았다.

쿠궁

에러 문구는 다음과 같았다.

SCRIPT5009: 'WebSocket'이(가) 정의되지 않았습니다.

 

분명 나는 WebSocket을 설정하지 않았는데 왜 이런 에러가 뜨는가 해서 프로젝트를 살펴보았더니...

 

node_modules 안의 package들

 

node_modules 안에 websocket 관련된 라이브러리가 설치되어 있었다.

CLI로 설치하여 이것저것이 깔린 것 같다. 현재 프로젝트에서는 ws를 사용하지 않으니 이를 비활성화하여 문제를 해결하고자 하였다.

모듈 관련 문제이기 때문에 vue.config.js를 수정해 이 문제를 해결해 주었다.

CLI로 Vue를 설치하면 기본적으로 아래의 vue.config.js가 생성되어 있다.

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	transpileDependencies: true,
});

 

이 파일에서 webSocketServer만 false로 설정해 주었다.

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	transpileDependencies: true,
	devServer: {
		webSocketServer: false,
	},
});

 

이렇게 설정 후, 다시 서버를 껐다 켜주면

이렇게 IE9에서도 렌더링 잘 된 화면을 볼 수 있다.

이렇게 설정해 주면 기본적인 설정은 끝이다.

 

프로젝트를 진행하며 여러 에러들과 문제를 마주하게 되었는데, 이 부분들은 다음 포스팅에서 정리하려고 한다.

 

---

REF

https://stackoverflow.com/questions/10618775/how-to-run-websocket-in-ie

https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver

https://github.com/webpack-contrib/url-loader/issues/201