解决vue-baidu-map在IE和火狐下不显示的问题

问题描述:

在使用vue-baidu-map时,发现地图在谷歌或者谷歌内核的浏览器下可以正确显示,但是在火狐和IE,或者IE内核(如遨游等双核浏览器的IE内核模式下)不显示,甚至连VUE项目都打不开来,且报两处错误,如下:

解决vue-baidu-map在IE和火狐下不显示的问题

解决vue-baidu-map在IE和火狐下不显示的问题

光看报错,很难确定错误原因,我们还是去vue-baidu-map中找答案吧,

解决vue-baidu-map在IE和火狐下不显示的问题 我们在官方文档中发现这么一句话,加载vue-baidu-map是要安装loader:babel-polyfill的,来是一些浏览器支持ES6语法。且安装了babel-polyfill插件的,要确保命中了要处理的组件库;所以我们在webpack.base.conf.js文件下做如下配置:

解决vue-baidu-map在IE和火狐下不显示的问题

 这是你会发现,项目可以在IE下打开了,也不报第一个错误了,但地图还是不显示,第二个错误还是报,我们从错误来看:非标准属性zoom,很容易联想到animate.css动画的zoom in  zoomout等,所以我们立马想到,我们的项目在整个主页都用了zoom的动画,我们尝试去掉该动画试试,果然是因为这个,地图就显示了。

去掉此动画:

解决vue-baidu-map在IE和火狐下不显示的问题

(有时候错误就是这么奇怪,百思不得其解,但是自己多查资料,用心去琢磨,再多的bug也能解决)