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 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP解析RSS的方法
2015/03/05 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
关于python 跨域处理方式详解
2020/03/28 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
人事行政主管岗位职责
2013/12/22 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
慰问信格式
2015/02/14 职场文书
餐馆开业致辞
2015/08/01 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电
TS 类型兼容教程示例详解
2022/09/23 Javascript