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

相關文章
相關標籤/搜索