网上关于vue项目打开空白的解决方法有很多,90%以上的原因是教大家装babel,安装了babel在一定程序度上解决了大部分人的问题,但是还有百分之十的人没有解决,这个时候有哪些行之有效的方法呢?
有时候,新接触的项目,目录多,路由多,文件多,可能项目文件达几百个,babel也安装了, 运行起来别的浏览器都没有问题,IE打开空白,但是啥错也不报,这个时候就尴尬了
一.普通项目配置babel
1.安装 npm install babel-polyfill复制代码
2. 引入 require("babel-polyfill"); 或者 import"babel-polyfill";复制代码
3.修改webapck配置文件文件 module.exports = { entry: ["babel-polyfill","./app/js"]};复制代码
一般情况下到这一步能解决部分用户的问题了,如果还是有浏览器报错则根据提示解决各种报错直到浏览器不再报错,如果打包到线上还有空白的问题,可以用解决部分问题,提示用最新版本
二.ie打开不报错但空白终极法宝
1. 在实际项目中,可能会遇到项目目录多,文件多,而且查看各个的配置,babel啥的也都安装了,其它浏览器也都正常,但是,无论怎么改配置,ie打开就是空白,而且还不报错,这个时候,就需要我们自已从头开始重新检查页面了,具体怎么检查呢
2. 把项目的所有配置单独拎出来,就放一个单页面,比如一个项目有几百个vue文件,怎么定位出错的文件呢更改路由配置,留下一个路由,运行后ie打开,如果有报错就解决报错问题,转为上文中的一步骤,如果没有问题,能正常打开我们进行下一步
所有的配置拎出来了,如果有出划也都解决了,ie打开也不空白,就开始定位出错的文件了
3. 二分之一定位法大部分项目可能文件都比较多,如果一个个去定位势必会浪费太多的时间,效率太低,这个时候,我这里推荐一个,至少可以节约四分之三的文件定位时间,比如我们有200个路由文件,那么可以先注释掉其中100个,留下有的100个,如果打开空白,说明问题存在于目前100个文件中,如果没有问题,则说明后100个文件中有问题,已经排除掉一半正确的了
4. 接下来同上,200个路由,则依次定位100,50,25,12,6,3,这样能很快帮我们找到有问题的文件,查看引起空白的文件,我们再依次解决问题,直到所有文件加上,Ie都不空白了
三.IE空白小结
经过各种折腾和配置发现,大部分的问题出在于vue模板文件的语法错误,比如重复定义组件的方法属性 js语法错误等等,这些错误 如果配置了eslint其实是很容易发现了的,但是一些老的项目没有配置eslint,代码多,目录复杂,引入多,找出问题也没有那么容易,所以无论是新建项目还是旧项目,都配置eslint进行语法检查,规避各种语法错误,也就压根不再会存在配置了所有的相关插件,但是就是空白,然后还不报错的问题了。
以上原文由夭夭个人总结,如有转载请说明出处