vue 項目白屏解決方案

在作的項目是使用 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 ，完美解決。