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


Posted in Javascript onSeptember 27, 2020

问题现象

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

browserslist的配置如下:

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

但开发环境的IE11打开显示白屏,F12打开显示:

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

分析过程

5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料都说使用babel-polyfill来解决。

现象一:IE不支持ES6语法

  • Vuex requires a Promise polyfill in this browser
  • "“Promise”未定义"

以上现象为IE不支持Promise,即不支持ES6语法。出现IE白屏和报SCRIPT1002错误的大都是此原因。当前处理起来也比较简单,网上大部份资源都可以找到解决方案,就是使用babel-polyfill。

首先安装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';

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

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

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

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

现象二:第三方插件引入导致

由于项目使用了长连接库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不白屏了,但业务需要IE11是不能放弃长连接的,经过尝试发现是socket.io-client这个插件在使用import引入时导致的问题。

解决方法一:

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>

解决方法二:

保留main.js对第三方插件的引入不变,只需要在vue.config.js的transpileDependencies添加要显示依赖的插件即可:

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

transpileDependencies的作用是:默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

现象三:本地环境正常,但生产环境仍旧白屏

发现引入一个多语言文件时,JSON没有使用合适的逗号导致,如下:

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

当我我第8行的逗号去掉后,奇迹般正常了。
另外,如果前端工程引入的文件不在工程的根目录下,也会出现这种情况。

到此这篇关于VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决的文章就介绍到这了,更多相关VUE IE11白屏报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
Javascript异步流程控制之串行执行详解
Sep 27 #Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 #Javascript
Openlayers实现测量功能
Sep 25 #Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 #Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
Openlayers测量距离与面积的实现方法
Sep 25 #Javascript
You might like
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python 查看list中是否含有某元素的方法
2018/06/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python下简易的单例模式详解
2019/04/08 Python
pandas的qcut()方法详解
2019/07/06 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
安全生产投入制度
2014/01/29 职场文书
给客户的检讨书
2014/12/21 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript