【bug小总】vue2项目会在低版本的360极速浏览器报错Uncaught SyntaxError: Unexpected token

编程入门 行业动态 更新时间:2024-10-27 17:23:37

1.业务背景

公司里的一个h5 vue2项目,在主流的浏览器中都是可以跑通的,但是在低版本(11版本)的360极速浏览器以及手机端的谷歌浏览器中却遇到了bug(bug如下图),而且这个错误是一个语法错误,很显然是一个浏览器兼容的问题。

2.问题排查

这是一个语法错误,很有可能是使用了不兼容的语法,毕竟在网上很多地方可以查到说可能是低版本不兼容Promise的原因,在经过尝试和一次铁证后我确定了不是这个问题(通过在这个360极速浏览器的控制台中打印并使用Promise对象确定不是这个问题)。
随后我使用了最笨的排查方法,通过删除对比来确定bug的位置,比如我上面图的bug中出现了tabsItem.vue我就先把这个组件删除,然后真的成功了,所以问题就在这个组件上,然后将整个组件的分为几个部分,一步步慢慢加上去,最后确定了问题所在是由于可选链引起的

3.问题解决

找到问题,解决问题就容易很多了,首先先要确认是不是可选链的原因,通过修改确认是它,如果你觉得就是想解决这个问题,那么你就不要使用这个语法就可以了

更加优雅的办法: 我们知道关于浏览器的兼容是交给Babel来做的,而在vue2项目中是通过babel.config.js 进行配置的,因此我们查询官方(或者找一下网上教程再上官网)进行配置就好了,我这里要解决可选链问题的话,那就是对应官方的这个地址:@babel/plugin-proposal-optional-chaining
先安装包:

npm install --save-dev @babel/plugin-proposal-optional-chaining

然后在babel.config.js文件中添加上(省略号是你的其他配置):

module.exports = {
  ...
  plugins:[
  	...
    "@babel/plugin-proposal-optional-chaining",//可选链语法兼容
  ]
}

4.来波小总结

所以以后如果遇到低版本的浏览出现语法错误,可以考虑下面的步骤

  1. 思考一下是不是什么新语法不兼容
  2. 对比法排查相关原因(如果页面出的来那肯定打断点调试或者控制台输出提示更香了)
  3. 找到对应的babel插件进行配置

关于兼容性的问题,可以在MND和这个网站进行查阅

更多推荐

【bug小总】vue2项目会在低版本的360极速浏览器报错Uncaught SyntaxError: Unexpected token

本文发布于:2023-06-14 08:17:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1455326.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:会在   报错   极速   浏览器   版本

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!