vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...

记一次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包的编译导致的语法兼容性问题希望对遇到同样问题的朋友提供解决思路

vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...相关推荐

vue检测是不是360浏览器兼容模式_vue开发之不同浏览器的类型判断
一.通过navigator.userAgent来进行浏览器类型判断定义和用法 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. 一般来讲,它是在 nav ...
vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
vue的边距怎么设置_Vue项目如何适应浏览器，去除容器控件与浏览器四周的距离...
刚开始Vue项目中用了Container容器,运行之后,页面上容器的header距离浏览器的顶部有一段距离,然后找到了App.vue的样式,把(margin-top:60px)去掉了.之后运行发现依然 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
vue v-if判断数组元素的值_Vue项目上线做的一些基本优化
前言本文主要是做一个Vue性能优化的帖子,做一个参考文档,对以后项目上线做一些集合文档.如果对各位在项目优化时,做一个文档参照. 开发过程在开发项目的时候,就要注意项目的一些小技巧,下面我就罗列一 ...
vue中axios设置表单头_VUE项目axios请求头更改Content-Type操作
我就废话不多说了,大家还是直接看代码吧~ const httpServer = (opts, data) => { const token = localStorage.getItem('tok ...
vue导出excel加一个进度条_vue项目中如何把数据导出成excel文件
Loading... 关于vue中如何把数据导出成excel文件 ### 1. 安装依赖 ``` yarn add file-saver yarn add xlsx yarn add script-l ...
vue首屏加载速度慢_vue项目首屏打开速度慢的解决方法
最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢? 首先我们需要安装webpack-bundle-analy ...
vue检测是不是360浏览器兼容模式_360安全浏览器兼容模式无法访问vue怎么解决？...
360安全浏览器兼容模式无法访问vue怎么解决?下面本篇文章给大家介绍一下vue在IE和360兼容模式下无法显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 360兼容模式下 ...

vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...

vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...相关推荐

最新文章

热门文章