Vue.js IE11 호환문제 (SCRIPT1003 ':' 가 필요합니다. Expected ':')

Vue.js 개발을 하다가 IE11 호환이 필요하다는 말을 듣고

IE로 접속을 시도했으나 아래와 같은 오류를 만났다.

 

에러라인을 확인해보려해도 얻을 수 있는게 없습니다.

 

해당 내용으로 검색을 해보니 IE11은 polyfill 으로 지원한다고 한다.

 

해당 내용은 Vuetify 홈페이지에서 확인했지만 어차피 vuetify 를 사용하기 때문에 같다고 생각된다.

 

실제론 IE8 이하버전을 지원하지 않으나..

IE8, 9, 10을 사용하는 곳은 없길 바란다.

 

각설하고

polyfill 으로 지원하기 때문에 polyfill 을 설치해봤다.

 

해당 내용도 vuetify 홈페이지에서 발췌했다.

 

babel-polyfill 인스톨

$ npm install babel-polyfill --save

 

main.js 에 import

import 'babel-polyfill'

 

프리셋 정보를 저장할 것으로 생각된다.

$ npm install @babel/preset-env -D

 

.babelrc 파일에 정보 입력

{

  "presets": ["@babel/preset-env"]

}

 

babel.config.js 파일에 정보 입력

module.exports = {

  presets: ['@babel/preset-env']

}

 

다 작성했으나 안된다.

나만 안된다.

다들 된다는데 나만 안된다..

 

 

사람들이 vue ui 페이지에서 생성하면 된단다.

 

새로 프로젝트를 생성하고..

 

종속성을 설치해주고..

 

오.. 일단된다..?

 

이제 기존 프로젝트에 만들었던 컴포넌트들을 가져와보자.

 

 

? 또만났다..

 

main.js 에 component 를 import 하기만 해도 오류가 발생한다.

 

하나씩 디버깅해본 결과..

 

범인은 VSCode 의 script 태그 자동완성 기능에 있었다.

 

vue-cli 3.4 버전 이후 부터는 vue.js 에서 typescript 를 사용할 수 있다고 한다.

typescript 를 이용하면 component 를 class 형식으로 만들 수 있어서 백엔드와 친해진..? 느낌이다.

 

아무튼 typescript 로 생성이되면..

 

<script lang="ts">

import Vue from 'vue'

export default Vue.extend({

    

})

</script>

 

script tag 뒤에 lang="ts" 라는 옵션이 붙고

export 에 Vue.extend 를 사용해서 typescript 를 쓸 수 있다.

 

하지만.. 이게 IE11 호환이 안된다..

이유는 아직 모르겠지만.. 아무튼 이게 붙으면 백지로 변해버린다.

 

typescript 를 꼭 써야되는 상황이라면 해결방법까지 찾아봤겠지만..

프론트 기초부분을 하고있어서 꼭 typescript 를 사용하지 않아도 된다.

 

아무튼 결론.

vue.js 는 IE11 호환이 된다. (babel-polyfill 사용)

vue.js 는 typescript 를 지원하나 IE11 에서 호환되지 않을 수 있다.

(특정 종속성을 설치하면 될 수도 있고 안될수도 있을듯..)