随着前端的技术的不断发展，JavaScript也在不断地版本迭代，但是浏览器厂商如果不支持新版的js，那么对于前端同学来说是一场灾难，最近小飞就遇到了这样的一个问题，好好的Vue项目在低版本安卓6.0一下，还有IE浏览器上白屏，于是乎就有了这次es6转es5的探索之旅。

遇到问题当然是问google了，这一查不要紧，babel已经到7.x版本了，可是我还是停留在6.x版本啊，vue-cli已经是3.x了，可是我用的还是vue-2.x，这可让我如何是好。

解决这个问题最重要的是两个插件

使用方式呢，也很简单在入口文件main.js 顶部引入这两个插件

欢天喜地的以为这不是so easy嘛，就像 “外事不决问google，内事不决问baidu”一样，但是打包上传服务器之后，为何我的还是白屏，什么鬼，这是在玩儿我么，但是广大网友也不至于给我开这个玩笑啊

是不是可能是我babel-core是6.x的原因呢，那我就升级一下试试吧，于是把所有以babel开头的给卸载了，我要重新配置babel环境，你没有听错，我就是要重新配置

一、介绍一下babel7库的作用域（scope）

二、babel7配置后的文件

于是我兴致勃勃的去重新打包服务构建到服务器，什么鬼怎么还不好使呢，这不是逗我呢，我都升级到7了，然后打开IE浏览器我又看了看报错信息

点进去看了看压缩之后的代码的报错，看压缩之后的代码真是头疼的事情啊

什么鬼还有“constructor”这肯定是es6转es5没转好啊，想了想，我的babel都重新安装了应该不会有这个问题，那么肯定就是某个插件没有转成功，于是在node_modules里边全局搜索this.classPrefix 果然是这个原因

是引用的一个highlight.js用来做代码高亮的插件引起的，我滴个亲娘啊，终于找到这个作祟的鬼了，然后IE也好了，低版本的问题也解决了，所以这个就告诉我们遇到问题不要慌，输入google来解决问题。

你以为这样就结束了？？？

你知道变态的IE又出现了了新的问题

什么？解决了babel还会出现新的问题？，当然啊，当然会出现啊，你解决的是js的问题，那么css3的问题呢

当时我就不淡定了，发现是Vue的 weui的字体库的问题

这个是因为IE上边不支持字体库，既然不支持字体库那怎么办呢，那就用自己的样式覆盖吧，首先复制src下边的database64的字节流就是 “data:application/octet-stream;base64,” 之后的纯base64字节流

经过以上四步我们就生成了

然后我们在APP.vue里边进行配置

这样就针对IE做好了字体库的配置，完美的解决了问题（自欺欺人一下，虽然报这个错误但是页面可以正常显示，只是字体的问题，所以 以上配置并没有解决我的问题，但是白屏问题已经解决了，字体的问题稍后补充。

以上的字体的解决方式参考：）

一把辛酸泪，以上历程是三天的解决问题的过程，事后回忆了一下大概有一下三个思路：

• 如果不行就看报错信息看看是否是因为babel版本不兼容的问题还是因为引入第三方插件不转义引起的
• 删除其他逻辑页面，只保留静态页面看看是那部分的
• 如果实在没有办法就。。。把所有的es6转成es5来写吧（内心的挣扎）

至此白屏问题告一段落了，等有时间再更新vux中的@font-face的base64的字体库的问题

不说了，产品又开始改需求了