vue 專案白屏解決方案

將臣發表於2019-02-16

在做的專案是使用 vue-cli 腳手架為基礎的,只能使用微信瀏覽器開啟的。在某次更新功能程式碼後,被反饋在一些手機上會出現白屏。經過一番探索,多管齊下解決了問題

白屏可能的原因:

  1. es6 程式碼沒有被編譯成 es5 ;
  2. 檔案打包路徑錯誤;
  3. 運營商塞入的廣告 js 伺服器報錯,連累專案不能下載資源;

針對 1 和 2 ,分別採取以下做法:

解決位置:config/index.js 檔案:把 assetsPublicPath: `/` 改為assetsPublicPath: `./`

build: {
    assetsPublicPath: `./`,
}

解決位置:

首先安裝 babel-polyfill 庫;

npm install --save babel-polyfill

然後修改 build/webpack.base.conf.js 檔案,將

entry: {
   app: `./src/main.js`,
 }

改成

entry: {
  app: ["babel-polyfill", "./src/main.js"]
}

使得其從入口檔案就開始轉換程式碼。


做了上面的操作後,問題就解決了,因此沒有對 3 進行實踐。


3 的情況,是身邊同事的經驗之談。部分使用者出現了打不開頁面的情況,剛好同事的手機也遇到同樣的情況,拿來分析之後發現,是運營商劫持了流量,往裡面塞了廣告 js ,結果它的伺服器還出錯…..解決方案是上 https ,完美解決。

相關文章