詳解vue 項(xiàng)目白屏解決方案
在做的項(xiàng)目是使用 vue-cli 腳手架為基礎(chǔ)的，只能使用微信瀏覽器打開的。在某次更新功能代碼后，被反饋在一些手機(jī)上會(huì)出現(xiàn)白屏。經(jīng)過一番探索，多管齊下解決了問題
白屏可能的原因：
- es6 代碼沒有被編譯成 es5 ；
- 文件打包路徑錯(cuò)誤；
- 運(yùn)營商塞入的廣告 js 服務(wù)器報(bào)錯(cuò)，連累項(xiàng)目不能下載資源；
針對 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: ['babel-polyfill', './src/main.js']
使得其從入口文件就開始轉(zhuǎn)換代碼。
做了上面的操作后，問題就解決了，因此沒有對 3 進(jìn)行實(shí)踐。
3 的情況，是以前的經(jīng)驗(yàn)之談。部分用戶出現(xiàn)了打不開頁面的情況，剛好同事的手機(jī)也遇到同樣的情況，拿來分析之后發(fā)現(xiàn)，是運(yùn)營商劫持了流量，往里面塞了廣告 js ，結(jié)果它的服務(wù)器還出錯(cuò).....解決方案是上 https ，完美解決。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue elementUI 自定義表單模板組件功能實(shí)現(xiàn)
在項(xiàng)目開發(fā)中，我們會(huì)遇到這種需求，在管理后臺(tái)添加自定義表單，在指定的頁面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
關(guān)于怎么在vue項(xiàng)目里寫react詳情
本篇文章是在vue項(xiàng)目里寫tsx的一篇介紹。其實(shí)vue里面寫jsx也挺有意思的，接下來小編九給大家詳細(xì)介紹吧，感興趣的小伙伴請參考下面的文章內(nèi)容2021-09-09
ElementUI動(dòng)態(tài)渲染el-table的實(shí)現(xiàn)過程
在前端開發(fā)中,表格是不可或缺的一部分,無論是數(shù)據(jù)展示、數(shù)據(jù)錄入,還是數(shù)據(jù)分析,表格都扮演著重要的角色,而在Vue.js生態(tài)系統(tǒng)中,ElementUI提供了一個(gè)強(qiáng)大且靈活的表格組件——el-table,本文將帶你深入了解如何使用ElementUI動(dòng)態(tài)渲染el-table,并詳細(xì)探討其原理及實(shí)現(xiàn)過程2024-08-08
vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)
不管是移動(dòng)端的適配,還是大屏需求,都離不開不一個(gè)單位rem,rem是相對于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue如何在store倉庫中使用路由，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了關(guān)于element-ui圖片上傳組件查看和限制方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決
這篇文章主要介紹了vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue使用driver.js完成頁面引導(dǎo)功能的示例詳解
在Vue中,driver.js通常是指用于實(shí)現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫,它可以幫助開發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡單的給大家介紹一下vue如何使用driver.js完成頁面引導(dǎo)功能2023-08-08
vue基于Echarts的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12