VUE 프로젝트 IE 11 화이트 스크린 오류 SCRIPT 1002:문법 오류 해결

문제 현상
프로젝트 는 vue/cli 3 비계 로 구 축 된 전단 프로젝트 를 사용 하고 vue 버 전 은 2.6.10 입 니 다.
browserslist 설정 은 다음 과 같 습 니 다:

[ "> 1%", "last 2 versions"]

그러나 개발 환경의 IE 11 은 디 스 플레이 화이트 스크린 을 열 고 F12 는 디 스 플레이 를 엽 니 다.

분석 과정
5306 줄 표시"./nodemodules/[email protected]@debug/src/browser.js"이 경 로 는 잘못 보고 되 었 습 니 다.eval()에 포 함 된 코드 에 ES6 문법 이 있 기 때문에 IE 는 지원 되 지 않 습 니 다.인터넷 에서 많은 자 료 를 찾 아 보 았 는데 babel-poly fill 로 해결 하 겠 다 고 합 니 다.
현상 1:IE 는 ES6 문법 을 지원 하지 않 습 니 다.

Vuex requires a Promise polyfill in this browser

"Promise"정의 되 지 않 음이상 의 현상 은 IE 가 Promise,즉 ES6 문법 을 지원 하지 않 는 다 는 것 이다.IE 화이트 스크린 과 SCRIPT 1002 오류 가 발생 한 것 은 대부분 이 때문이다.현재 처리 도 비교적 간단 합 니 다.인터넷 의 대부분 자원 에서 해결 방안 을 찾 을 수 있 습 니 다.바로 babel-poly fill 을 사용 하 는 것 입 니 다.
우선 babel-polyfill 을 설치 합 니 다.

npm install --save-dev babel-polyfill

그리고 babel.config.js 에서 presets 를 수정 합 니 다.내용 은 다음 과 같 습 니 다.

// presets: [["@vue/app", {useBuiltIns: "entry",}]],//   vue/cli3
presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry",}]],//   vue/cli4

해결 방법
main.js 의 첫 번 째 줄 도입:

import 'babel-polyfill';

해결 방법 2:
vue cli 공식 추천 사용,전 제 는 package.json 에 core-js 를 설치 한 것 입 니 다.

import 'core-js/stable';import 'regenerator-runtime/runtime';

해결 방법 3:
vue.config.js 에 다음 코드 를 추가 합 니 다.

configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; },

현상 2:제3자 플러그 인 도입 으로 인 한
프로젝트 는 긴 연결 라 이브 러 리 socket.io-client 와 vue-socket.io-extended 를 사 용 했 기 때문에 main.js 에서 사용 하 는 방법 은:

import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket);

내 가 이 네 줄 코드 를 주석 한 후에 신기 한 IE 는 흰색 화면 이 아 닙 니 다.그러나 업무 상 IE 11 이 필요 하면 긴 연결 을 포기 할 수 없습니다.시 도 를 통 해 socket.io-client 라 는 플러그 인 이 import 도입 을 사용 할 때 발생 하 는 문제 임 을 알 게 되 었 습 니 다.
해결 방법 1:
1.main.js 를 다음 과 같이 조정 합 니 다.

import VueSocketIOExt from 'vue-socket.io-extended';
const socket = io(process.env.VUE_APP_IO_URL);
Vue.use(VueSocketIOExt, socket);

2.socket.io-client 는 Public/index.html 파일 head 에 도입 합 니 다.

<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>

해결 방법 2:
main.js 가 제3자 플러그 인 에 대한 도입 은 변 하지 않 습 니 다.vue.config.js 의 transpileDependencies 에 의존 하 는 플러그 인 을 추가 하면 됩 니 다.

transpileDependencies:['socket.io-client'],
// transpileDependencies:['*'],

transpileDependencies 의 역할 은:기본 적 인 상황 에서 babel-loader 는 모든 node 를 무시 합 니 다.modules 의 파일.Babel 디 스 플레이 를 통 해 의존 도 를 번역 하려 면 이 옵션 에서 열거 할 수 있 습 니 다.
현상 3:현지 환경 은 정상 이지 만 생산 환경 은 여전히 흰색 화면 이다.
다 중 언어 파일 을 도입 한 것 을 발 견 했 을 때 JSON 은 적당 한 쉼표 를 사용 하지 않 아 다음 과 같 습 니 다.

내 가 여덟 번 째 줄 의 쉼표 를 지 운 후에 기적 처럼 정상 이 되 었 다.
또 전단 프로젝트 에 도 입 된 파일 이 프로젝트 의 루트 디 렉 터 리 에 없 으 면 이런 경우 도 있다.
여기 서 VUE 프로젝트 가 IE 11 화이트 스크린 에서 SCRIPT 1002 를 잘못 보 고 했 습 니 다.문법 오류 해결 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 VUE IE 11 화이트 스크린 오류 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!