踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”

国际惯例,按照步骤使用npm安装了vue-particles插件,项目跑起来后,在chrome,Edge以及safari中都没有什么问题,但是在IE中出现了空包页现象,没有报错,在强刷页面后出现 缺少":" 的报错,

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第1张图片

最初以为是不兼容IE版本低的问题,经过多次测试,IE11都会出现同样的问题,这不是太扯了嘛,经过度娘一番询问得知,是因为IE浏览器是需要做对ES6的兼容处理,但是发现已经在main.js中引入了babel-polyfill以及es6-promised

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第2张图片

然后就怀疑是因为插件的版本过低造成对ES6转化的不完整,更新后也排除掉了这个原因,

那就只能从插件本身的源码开始排查,也经过借鉴网上大神的方法,解决办法如下:

1、找到安装的插件目录

node_nodules/vue-particles

2、在目录下找到index.js文件,是在src目录下的vue-particles文件夹中,

node_nodules/vue-particles/src/vue-particles/index.js

3、将原来内容做如下修改

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第3张图片

修改为:

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第4张图片

重启项目,完美!!!

可能有的小伙伴们这样做修改以后,在IE10、IE9又有显得报错:

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第5张图片

同样还是空白页,那咱们就举一反三,还是要甩锅给ES6语法。。。

还是同样的index.js文件,把 const 改成 var ,

踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”_第6张图片

完美解决!!!

至于还有别的报错,楼主暂时还没有遇见,小伙伴们要是有更多的报错和解决办法,留言交流哈

你可能感兴趣的:(前端,vue)