vue项目IE打开空白终极法宝

网上关于vue项目打开空白的解决方法有不少,90%以上的缘由是教你们装babel,安装了babel在必定程序度上解决了大部分人的问题,可是还有百分之十的人没有解决,这个时候有哪些行之有效的方法呢?
有时候,新接触的项目,目录多,路由多,文件多,可能项目文件达几百个,babel也安装了, 运行起来别的浏览器都没有问题,IE打开空白,可是啥错也不报,这个时候就尴尬了vue

一.普通项目配置babel

1.安装  npm install babel-polyfill
复制代码
2. 引入 require("babel-polyfill");
   或者  import "babel-polyfill";
复制代码
3.修改webapck配置文件文件 
  module.exports = {
    entry: ["babel-polyfill", "./app/js"]
};
复制代码

通常状况下到这一步能解决部分用户的问题了,若是仍是有浏览器报错则根据提示解决各类报错直到浏览器再也不报错,若是打包到线上还有空白的问题,能够用解决部分问题,提示用最新版本web

二.ie打开不报错但空白终极法宝

在实际项目中,可能会遇到项目目录多,文件多,并且查看各个的配置,babel啥的也都安装了,其它浏览器也都正常,可是,不管怎么改配置,ie打开就是空白,并且还不报错,这个时候,就须要咱们自已从头开始从新检查页面了,具体怎么检查呢npm

  1. 把项目的全部配置单独拎出来,就放一个单页面,好比一个项目有几百个vue文件,怎么定位出错的文件呢 更改路由配置,留下一个路由,运行后ie打开,若是有报错就解决报错问题,转为上文中的一步骤,若是没有问题,能正常打开咱们进行下一步浏览器

  2. 全部的配置拎出来了,若是有出划也都解决了,ie打开也不空白,就开始定位出错的文件了bash

  3. 二分之必定位法大部分项目可能文件都比较多,若是一个个去定位势必会浪费太多的时间,效率过低,这个时候,我这里推荐一个,至少能够节约四分之三的文件定位时间,好比咱们有200个路由文件,那么能够先注释掉其中100个,留下有的100个,若是打开空白,说明问题存在于目前100个文件中,若是没有问题,则说明后100个文件中有问题,已经排除掉一半正确的了babel

  4. 接下来同上,200个路由,则依次定位100,50,25,12,6,3,这样能很快帮咱们找到有问题的文件,查看引发空白的文件,咱们再依次解决问题,直到全部文件加上,Ie都不空白了app

三.IE空白小结

通过各类折腾和配置发现,大部分的问题出在于vue模板文件的语法错误,好比重复定义组件的方法属性 js语法错误等等,这些错误 若是配置了eslint实际上是很容易发现了的,可是一些老的项目没有配置eslint,代码多,目录复杂,引入多,找出问题也没有那么容易,因此不管是新建项目仍是旧项目,都配置eslint进行语法检查,规避各类语法错误,也就压根再也不会存在配置了全部的相关插件,可是就是空白,而后还不报错的问题了。ui

以上原文由夭夭我的总结,若有转载请说明出处spa

相关文章
相关标签/搜索