IE에서 Vue.js 사용하기

1. ‘Promise’이(가) 정의되지 않았습니다.

오류

Vue.js에서 ajax요청을 할 때는 axios를 사용하기 마련이다. 편리하고 좋은 라이브러리지만, 구형 IE에서 실행하면 이런 오류가 뜬다.

ReferenceError: 'Promise'이(가) 정의되지 않았습니다.
   {
      [functions]: ,
      description: "'Promise'이(가) 정의되지 않았습니다.",
      message: "'Promise'이(가) 정의되지 않았습니다.",
      name: "ReferenceError",
      number: -2146823279
   }

axios가 IE를 지원하지 않기 때문이다. 이는 Vuex도 마찬가지다.

해결책

es6-promise를 적용하면 된다.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 

위 스크립트를 넣으면 이제 IE에서도 axios를 이용한 비동기 http 통신이 잘 된다.

webpack을 사용하는 경우에는 아래와 같이 하면 된다.

먼저 설치를 하고

# 설치
npm install es6-promise --save

entry로 사용하는 javascript 파일에 다음과 같이 넣어주면, 전역 환경(global environment)에 적용된다. 다른 파일에 달리 import하거나 require를 적어줄 필요가 없다. 둘 중 하나를 선택해서 넣어주자.

// CommonJs 방식
require('es6-promise').polyfill();

// ES6 방식
import 'es6-promise/auto'

이래도 여전히 ‘Promise’이(가) 정의되지 않았습니다. 오류가 뜬다면, [es6-promise]를 불러오는 순서를 위로 땡겨주자. 적어도 Vuex나 axios를 사용하는 시점보다는 빨리 불러와야 정상 동작한다.

2. Symbol이 정의되지 않았습니다

오류

es6와 typescript로 프로젝트를 구성하면 이런 오류가 뜨기도 한다.

SCRIPT5009: 'Symbol'이(가) 정의되지 않았습니다.
lang.js (12,1)

IE가 symbol을 지원하지 않기 때문이다.

해결책

babel-polyfill을 적용하자.

우선 프로젝트에 추가해주고

# 설치
npm install --save babel-polyfill

entry로 사용하는 javascript 파일에 다음과 같이 넣어주면 된다. 아래 코드에서는 es6 방식으로 넣었다. es6-promise와 마찬가지로 최상단에 추가해줘야 한다.

// main.js or index.js or main.ts
import 'babel-polyfill' // <== 추가
import Vue from 'vue'

// ...

new Vue({
   // ...
})