VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

Dragonfly_w

已于 2022-09-06 17:00:12 修改

阅读量1.2w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： vue babel 文章标签： vue.js 前端

于 2022-02-25 14:47:24 首次发布

原文链接：https://www.jb51.net/article/196582.htm

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

babel

2 篇文章

订阅专栏

本文详细介绍了在Vue CLI 4项目中遇到的IE11白屏问题，重点讲述了三种解决方法：使用babel-polyfill、core-js与regenerator-runtime，以及在vue.config.js中配置transpileDependencies。针对sockjs-client错误，提供了降低版本并重新编译的正确修复步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题现象

项目使用vue/cli4脚手架搭建的前端项目，vue版本为2.6.10。

但开发环境的IE11打开显示白屏，F12打开显示：
在这里插入图片描述
查明报错原因是： IE不支持ES6语法

解决方法一

npm install --save-dev babel-polyfill 或 npm install --save @babel-polyfill

main.js的第一行引入：

/*记住一定是首行代码*/
import 'babel-polyfill' 或 import '@babel-polyfill'

然后在babel.config.js修改presets，内容如下：

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

解决方法二
vue cli官方推荐使用，前提是package.json安装了core-js或者安装

npm install --save core-js regenerator-runtime

其次在main.js首行引入

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

解决方法三
在vue.config.js里添加如下代码：

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

还有一种情况是在ie中打开报错显示的sockjs-client错误

/***/ "./node_modules/sockjs-client/dist/sockjs.js":
/*!***************************************************!*\
  !*** ./node_modules/sockjs-client/dist/sockjs.js ***!
  \***************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

解决
网络解决方案
此方案根本行不通，也不知道是谁测试出来的，本人亲测完全解决不了实际问题
在这里插入图片描述
** 正确解决 **
降低sockjs-client的版本，他依赖描述在package-lock.json在里面，如果有这种情况出现，你的版本可能在我下方给出这个版本之上

npm i sockjs-client@1.5.1 -D

更新版本完成后在，重新编译项目

即可解决

如果上述方法还是没有解决你们的问题，那就有可能是你们使用了第三包，因为vue编译默认是不编译第三包的（node_modules）, 此时目标明确，就好解决问题如下:

在你的vue.config.js文件中添加配置

transpileDependencies: [
    '包名或使用正则匹配'，
    ...
  ]

vue.config.js配置文件介绍链接