Vue cli 3.x 이상 에서 IE브라우저 지원하기 (polyfill)

Vue 로 작업한 프로젝트를 IE화면테스트 하던 중에 흰 화면 (Blank)이 뜨며 오류를 발견.

프로젝트에 사용된 Vue-cli 버전은 3이상으로 

Vue 3.x 부터는 ES6 사용으로 인해 IE브라우저를 지원하지 않는다. 

 

pollyfil 를 설치하여 별도로 세팅이 필요.

---

터미널(cmd) 설치

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

---

main.js (주의: 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

---

vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

 

---

babel.config.js

//babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}