Vue CLI 3.x으로 작성한 코드를 IE11에서 작동하도록 설정하기

Vue CLI 3 버전의 코드를 IE11을 지원하도록 설정하기..

사실 내키지는 않지만 할 수 밖에 없는 상황이 안타깝습니다. IE11은 어서 빨리 버려야 하는 브라우저지만 국내 상황이 그러하니 어쩔 수 없네요..

다음의 단계를 따라서 수행해보세요...

• babel polyfill 설치하기
  npm install --save @babel/polyfill 또는 yarn add @babel/polyfill

• src/main.js 에 import '@babel/polyfill'; 코드를 추가합니다.

import '@babel/polyfill'
import Vue from "vue";
......

• babel.config.js 를 다음과 같이 변경합니다.

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

• vue.config.js 파일을 추가하고 다음과 같이 작성합니다. 기존 설정이 이미 있다면 추가합니다.

const ansiRegex = require('ansi-regex')

module.exports = {
    ......(기존 설정이 있다면 다음에 추가)
    transpileDependencies: [ansiRegex]
}

이 밖에도 IE11에서 promise 패턴을 자주 사용하는데 이 경우 es6-promise와 같은 polyfill을 사용하도록 설정하셔야 합니다.