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 类型判断代码分析
Mar 28 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jqTransform美化表单
2015/10/10 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
高中生操行评语大全
2014/04/25 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014年党小组工作总结
2014/12/20 职场文书
青春雷锋观后感
2015/06/10 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL