记一次bug解决

bug发现

项目不复杂,就是一个基于vue-cli3搭建的pc端项目

在开发进入后半段的时候发现在360浏览器兼容模式先显示空白而且没有报错,此类问题之前我写react在低版本的qq浏览器上也遇到过,因为当时写的是移动端项目也就没在意

网上搜索找到的答案几乎都是Promsie的兼容问题,给出的解决方案是babel-polyfill,script标签引入也好,main.js引入也好,都没有效果(因为他本身就没报Promsie的错 有效果就有鬼啦)

demo测试

我用cli新建了一个demo,发现在兼容模式下可以正常打开

这就奇怪了 所以应该不是vue的语法问题,所以我把问题联想到了iview

大部分组件和功能支持 IE9 及以上浏览器，部分组件和功能不支持 IE

我用vue-cli-plugin-iview加入了iview之后 果然在兼容模式下打不开了 , 我开始寻找相关的解决办法 很快在github上找到了这个issues

在vue.config.js中加入transpileDependencies: ['iview']即可 此时demo可在360兼容模式中正常打开

transpileDependencies 这一配置可以再vue cli的文档中找到

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel >显式转译一个依赖，可以在这个选项中列出来。

项目仍然空白

这就很尴尬,有点没头绪 因为他不报错...

直到我打开F12的情况下点击刷新 报错了: SCRIPT1002:语法错误

然后一点开 完全看不懂...

但是应该可以看出 错误在于语法不识别 应该是babel跳过了node_modules中的某个包没有编译导致的;将报错内容一直往下拉我发现了

可见应该是swiper 某些语法报错 所以在刚才的数组中 加入 'swiper' , 重启服务 仍报错,浏览器空白

使用相同的方法,问题锁定在了另外一个包 (虽然我不知道那个包是干嘛的),把包名 也加入transpileDependencies对应的数组中后 项目可正常在360浏览器兼容模式下打开

问题解决

总之是babel跳过了node包的编译 导致的语法兼容性问题 希望对遇到同样问题的朋友提供解决思路