位置: IT常识 - 正文

整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误(vue项目中技巧知识点)

编辑:rootadmin
整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

目录

一、关于 sockjs-client 依赖包

二、关于 highlight 依赖包

三、关于 swiper 依赖包

四、IE 不支持 ES6 语法

五、第三方插件引入导致

六、本地环境正常,生产环境仍旧白屏


推荐整理分享整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误(vue项目中技巧知识点),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目各个文件介绍,vue项目中技巧知识点,vue app项目,vue项目中技巧知识点,vue项目实战教程,vue项目各个文件介绍,完整的vue项目,vue项目实战教程,内容如对您有帮助,希望把文章链接给更多的朋友!

这篇文章主要介绍了 Vue 项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 的案例

一、关于 sockjs-client 依赖包

Bug 背景 :接手一个新项目 ,npm run dev 启动服务器之后默认打开的是 谷歌浏览器 , 

后来发现项目在 IE 浏览器 打开后 白屏 , F12 打开控制台后报错信息显示如下 :

SCRIPT1002:语法错误

文件:app.js,行:207536,列:23

点击报错信息后展示(当时的报错没有截图,用的别人的图)

    像这种根本就没法排查错误 ,就很恼火啊!

百度了一堆 ,全是抄来抄去,关键是还没有能解决问题的 ,万能的谷歌走起

    其实对于这个问题很明显就是 语法错误 ,就是 IE 不支持 的问题 ,IE 垃圾 。。

既然是语法的问题 ,那就是 编译的问题 ,那么咱们就直接编译对应的包 ,

但是那是哪个包呢 ?

重点来了:点开报错信息 ,会发现 断点 在的地方就是 报错的地方 ,

那肯定就是这里的问题了,但是这是编译后的代码,怎么排查是哪个包呢 ?

突然发现 上面的注释 不就是这个 包的名字 吗 ???

恍然大悟 ,犹如发现新大陆 !

./node_modules/_js-base64@3.6.2@js-base64.js

就是他了,此图不是我的报错信息,我的报错信息是

一个关于 sockjs-client 依赖包 的原因 ,

经过排查 , 是因为 sockjs-client 版本太低了(@1.5.0), 版本升级一下就好了命令是 : $ npm install sockjs-client@1.5.1 -D ,运行一下 , 重启一下就好了

但是自行检查过程中并没有在 package.json 文件中找到 sockjs-client 这个依赖包

后来得知 sockjs-client 依赖包 并没有显示在 package.json 文件里面 , 

而是在 package-lock.json 文件里 , 可以找到 “sockjs-client”: "^1.5.0",

运行完升级命令之后 ,就会在 package.json 文件 的 “devDependencies” 下面看到 :

“sockjs-client”: "^1.5.1" ,

总结就是 : package.json 里面没有,就是在 package-lock.json 里面 🈶️

但是 , 后来我试了一下 npm uninstall sockjs-client ,把这个依赖包卸载后

IE 浏览器依旧可以正常打开并且显示不白屏了 , 就很神奇 。 

也可能是因为 package-lock.json 里面的配置随着升级依赖包时已经改好了吧

需求背景 : 半年前开发的项目今天再次启用时 , 发现谷歌浏览器正常打开 , IE 却

又又又 白屏 了 ??? 之前还是好的 , 哎 , 没办法 , 再想办法解决吧 。。。

而且这回 IE 还有个“毛病”就是控制台在开启状态时进入页面时 , 它会自动进入断点模式 ,

1、断点进入的第一个位置显示如下图 :(此时页面白屏,加载不出来)

整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误(vue项目中技巧知识点)

其实这里大致就能看出来端倪了 , 又是 node_modules 里面一个 关于 sockjs-client 依赖包

出了问题 , 发现大多都跟这个包有关系哎 。。

2、清理IE浏览器缓存后 , 这里页面显示 无法显示此页 (断点运行结束)

2-2、断点运行继续下一个位置显示如下图:

( 此时页面其实是可以加载出来了 ,但出现报错 )

控制台报错如下图所示 :

SCRIPT5022: SecurityError

文件:sockjs.js,行:1687,列:3

我另一个前端同事的报错信息是 :

SCRIPT1002:语法错误

解决方案 :

将 sockjs-client 依赖包版本调整一下版本(升级或降级)

package-lock.json   原版本信息如下图所示 :

npm install sockjs-client@1.5.1 -D

下载安装完新的依赖包之后 , 再重新启动项目 , 

发现 IE 浏览器打开控制台也不会再自动断点了 , 页面也能够正常展示无报错 。

"devDependencies": { "sockjs-client": "^1.5.1" }二、关于 highlight 依赖包

我依稀记得当初好像是因为在 main.js 文件内引用了 highlight 依赖 (一个高亮插件)

"highlight.js": "^10.7.1" , 我隐约记得是这个依赖包版本 , 老早之前了 。

所以导致了 IE 浏览器打开显示白屏并且控制台报错。

当时解决方案就是 : 直接删掉了那个引用依赖 , 因为项目中也用不到了 ,所以解决了 。

三、关于 swiper 依赖包

四、IE 不支持 ES6 语法

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 显式转译一个依赖 ,可以在这个选项中列出来。

六、本地环境正常,生产环境仍旧白屏

本文链接地址:https://www.jiuchutong.com/zhishi/287101.html 转载请保留说明!

上一篇:莱姆里杰斯的Cobb防波堤,英格兰多塞特 (© Ross Hoddinott/Offset by Shutterstock)(莱姆 惨败)

下一篇:以下是Uniapp面试题及其答案(uni app面试题)

  • 马志明相声黄大仙(魅族mx四核怎么样)(马志明相声大全 黄族民)

    马志明相声黄大仙(魅族mx四核怎么样)(马志明相声大全 黄族民)

  • 白条可以扫码付款吗(白条扫码付款被限制)

    白条可以扫码付款吗(白条扫码付款被限制)

  • 华为电脑怎么开启小娜(华为电脑怎么开摄像头)

    华为电脑怎么开启小娜(华为电脑怎么开摄像头)

  • 快手小黄车多久可以提现(快手小黄车多久收益,多久提现)

    快手小黄车多久可以提现(快手小黄车多久收益,多久提现)

  • db卡贴是什么东西(dbpro卡贴)

    db卡贴是什么东西(dbpro卡贴)

  • 快手流量券是什么意思(快手流量券是啥)

    快手流量券是什么意思(快手流量券是啥)

  • 电脑滴滴滴滴滴一直响(电脑滴滴滴滴滴滴响6声)

    电脑滴滴滴滴滴一直响(电脑滴滴滴滴滴滴响6声)

  • 台式电脑黑屏只有鼠标箭头(台式电脑黑屏只剩下一个鼠标箭头)

    台式电脑黑屏只有鼠标箭头(台式电脑黑屏只剩下一个鼠标箭头)

  • 显示器不小心调成DSUB(显示器不小心调成dsub,怎样按回来)

    显示器不小心调成DSUB(显示器不小心调成dsub,怎样按回来)

  • 华为屏幕朗读器怎么关闭(华为有没有朗读屏幕)

    华为屏幕朗读器怎么关闭(华为有没有朗读屏幕)

  • c20空开适合多少w电器(c20空开能带多大功率)

    c20空开适合多少w电器(c20空开能带多大功率)

  • 计算机中www是什么的缩写

    计算机中www是什么的缩写

  • ipad2反应慢怎么办(ipad2反应慢怎么解决)

    ipad2反应慢怎么办(ipad2反应慢怎么解决)

  • 怎么在酷我音乐上录歌曲(怎么在酷我音乐下载歌曲到u盘)

    怎么在酷我音乐上录歌曲(怎么在酷我音乐下载歌曲到u盘)

  • 网页的视频能加速么(网页的视频能加字幕吗)

    网页的视频能加速么(网页的视频能加字幕吗)

  • 华为mate30pro怎么设置杂志锁屏(华为mate30pro怎么样,值得入手吗)

    华为mate30pro怎么设置杂志锁屏(华为mate30pro怎么样,值得入手吗)

  • p40什么时候上市的(红米p40什么时候上市)

    p40什么时候上市的(红米p40什么时候上市)

  • 如何分辨airpods2真假(如何分辨airpods一代二代三代)

    如何分辨airpods2真假(如何分辨airpods一代二代三代)

  • qq怎么迁移聊天记录(qq怎么迁移聊天记录到另一台设备)

    qq怎么迁移聊天记录(qq怎么迁移聊天记录到另一台设备)

  • 无线网络连接上但手机上不了网(无线网络连接上但无法访问互联网)

    无线网络连接上但手机上不了网(无线网络连接上但无法访问互联网)

  • web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)(web前端面试基础知识)

    web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)(web前端面试基础知识)

  • 用 Python 从单个文本中提取关键字的四种超棒的方法(python单子)

    用 Python 从单个文本中提取关键字的四种超棒的方法(python单子)

  • 为你的WordPress添加图片替换功能 Enable Media Replace(wordpress!)

    为你的WordPress添加图片替换功能 Enable Media Replace(wordpress!)

  • 车险发票不含车船税怎么记账
  • 要交多少增值税
  • 先开票后跨月预缴税款可以吗
  • 生产成本科目期末余额反映的是
  • 以前年度多计管账怎么做
  • 投资管理公司成立的条件
  • 其他应付款贷方负数怎么调整
  • 股权投资收回的账务处理
  • 社保次月什么时候到账
  • 公司打印银行回单和对账单
  • 发票确认平台勾选步骤
  • 供应商给的折扣比发票少怎么做账
  • 个人所得税如何申报
  • 补缴所得税要调账吗
  • 分公司清算和总公司清算
  • 公司利润不分配可以怎么处理
  • 缴纳企业所得税怎么计算
  • 普通发票打歪了可以用吗
  • 非正常工资的个税是多少
  • 厂家取得的销售收入
  • 出差住宿费普票可以抵扣进项税吗为什么
  • 办理核定企业所需资料
  • 工业企业研发产品有哪些
  • 研发费用的
  • 赠送客户产品账务处理
  • 代理运输协议范本
  • 持有至到期投资是什么意思
  • 其他应收款计提坏账比例
  • getparameter报错
  • 应收账款记账凭证如何填写
  • 自产自用的产品用于在建工程
  • win10电脑输入法不见了怎么恢复
  • 未开票收入缴纳所得税吗
  • mac auto tune
  • php实现的中秋博饼游戏之绘制骰子图案功能示例
  • php代码封装成dll
  • mom.exe是什么进程
  • php常用函数大全
  • 提前支付的费用记账
  • 按实际成本结转6日和7日的材料采购成本
  • 橡皮树的扦插方法和注意事项
  • 向境外企业支付技术咨询指导费
  • 一般纳税人公司出售旧车怎么开票
  • 管理不善造成的货物损失进项税可以抵扣吗
  • 营业外收入汇算清缴时也得计入收入
  • 税率与征收率是怎么回事
  • 怎么作废银联在网上银行
  • sql如何设置远程连接
  • 企业捐赠支出计入什么科目
  • 企业所得税的计税步骤
  • 主营业务成本和营业成本的区别
  • 转让专利权收入属于什么收入
  • 销售收入小于销售成本
  • 融资租赁收到的租金计入什么科目
  • 农民农作物补偿标准文件
  • 微众银行贷款到私账吗
  • 现金日记账与现金流量表的区别
  • 发票专用章刻制
  • 如何远程连接小米摄像头
  • 一个分页存储过多的文件
  • mysql in的子查询
  • win10 Realtek HD Audio更新失败怎么办 win10关闭UAC解决Realtek HD Audio更新失败
  • linux网络系统管理
  • centos8终端
  • WinXP下载东西总提示找不到文件的原因及解决方法
  • linux创建vg
  • Extjs4 GridPanel 的几种样式使用介绍
  • 注册表cmd
  • 不易引起无意注意的是
  • bootstrap页头
  • Node.js中的全局变量有哪些
  • unity音乐thefatrat
  • Android之Service
  • 陕西省地方税务局关于调整土地增值税预征率的公告
  • 呼和浩特市契税2021年新规
  • 山东省立第三医院地址
  • 汽车购置税退税需要多长时间
  • 小规模纳税人税费怎么算
  • 电子税务局app扫脸认证
  • 江苏省国税客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设