vue 項目白屏解決方案
阿新 • • 發佈:2018-12-16
sset 運營商 assets 基礎 tsp pack path try 分析
在做的項目是使用 vue-cli 腳手架為基礎的,只能使用微信瀏覽器打開的。在某次更新功能代碼後,被反饋在一些手機上會出現白屏。經過一番探索,多管齊下解決了問題
白屏可能的原因:
- es6 代碼沒有被編譯成 es5 ;
- 文件打包路徑錯誤;
- 運營商塞入的廣告 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 ,完美解決。
來源:https://segmentfault.com/a/1190000016853748
vue 項目白屏解決方案