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

news/2024/11/25 12:32:34/

目录

一、关于 sockjs-client 依赖包

二、关于 highlight 依赖包

三、关于 swiper 依赖包

四、IE 不支持 ES6 语法

五、第三方插件引入导致

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


这篇文章主要介绍了 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 里面的配置随着升级依赖包时已经改好了吧


二、关于 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.jstranspileDependencies 添加要显示依赖的插件即可 :

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

transpileDependencies 的作用是 :

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。

如果你想要通过 Babel 显式转译一个依赖 ,可以在这个选项中列出来。


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


http://www.ppmy.cn/news/6100.html

相关文章

7、操作系统之间的文件传输

Windows 与 Linux 在Windows与Linux中传输文件的常用方式有两种&#xff0c;一种是使用使用XFTP工具&#xff0c;另一种是使用rz sz 命令的方式进行 lrzsz 安装 yum install lrzsz -y 1&#xff09;rz 将文件从window上传到Linux 2&#xff09;sz 将文件从linux传输到window …

stm32cubemx hal学习记录:电机控制

一、基础配置 1、配置RCC、SYS&#xff0c;SYS的Timebase Source选择TIM6 2、配置USART1、时钟84MHz 3、激活FreeRTOS&#xff0c;选择CMSIS_V1&#xff0c;Config parameters种USE_TIMERS选择ENABLE 二、编码器及电机驱动引脚配置 1、选用TIM3的编码器模式 2、驱动使用L2…

react-router-dom 降低版本的两种方法

前言 react-router-dom 如今已经升级到了 V6 版本&#xff0c;相比较 V5 版本&#xff0c;变化还是挺大的。如今使用 npm install react-router-dom -S 命令来下载 react-router-dom &#xff0c;会自动下载 V6 版本&#xff0c; V6 版本会在接下来的一段时间内成为主流。不过…

Coinbase或在不久使用Zebec发放工资,并对Web3支付赛道发展寄予厚望

流支付协议Zebec Protocol目前已经完成了生态向BNB Chian上的迁移&#xff0c;目前得到了以PancakeSwap为代表的头部生态的支持。在12月20日Zebec生态在PancakeSwap官方的支持下&#xff0c;经过社区投票&#xff0c;ZBC通证上线了糖浆池&#xff0c;并有望继续上线Binance。而…

机器学习算法基础——决策树

文章目录决策树算法的定义发展历程适用范围及其优缺点适用范围优点缺点代码实现决策树算法的定义 决策树&#xff08;Decision Tree&#xff09;是在已知各种情况发生概率的基础上&#xff0c;通过构成决策树来求取净现值的期望值大于等于零的概率&#xff0c;评价项目风险&…

小程序02/小程序 响应式单位rpx 、image组件概念说明 和 mode属性介绍

一. 响应式单位rpx rpx 说明 rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx 100% 屏幕的宽度 750rpx rpx响应单位 rpx是微信小程序独有的&#xff0c;解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应&#xff0c;不论大小屏幕&#xff0c;规定屏幕宽为750…

基于ACO蚁群优化实现VRPTW问题求解matlab仿真

目录 1.算法概述 2.仿真效果 3.matlab仿真源码 1.算法概述 随着科学技术和生产的不断发展,许多实际问题不可能在合理的时间范围内找到全局最优解,这就促使了近代最优化问题求解方法的产生。随着各种不同搜索机制的启发式算法相继出现,如禁忌搜索、遗传算法、模拟退火算法…

使用MAXScript脚本编写圣诞树建模插件教程

一、前言 2022年圣诞节到来啦&#xff0c;很高兴这次我们又能一起度过~ 今年的圣诞节为大家分享用MAXScript脚本编写圣诞树建模插件的技术创意&#xff0c;喜欢的同学别忘记在下面点个赞&#xff01; 二、创意名 一键圣诞树插件 三、效果展示 四、实现步骤 1.制作圣诞树的设计稿…