詳解vue 項目白屏解決方案
在做的項目是使用 vue-cli 腳手架為基礎(chǔ)的，只能使用微信瀏覽器打開的。在某次更新功能代碼后，被反饋在一些手機上會出現(xiàn)白屏。經(jīng)過一番探索，多管齊下解決了問題
白屏可能的原因：
- es6 代碼沒有被編譯成 es5 ；
- 文件打包路徑錯誤；
- 運營商塞入的廣告 js 服務(wù)器報錯，連累項目不能下載資源；
針對 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 進行實踐。
3 的情況，是以前的經(jīng)驗之談。部分用戶出現(xiàn)了打不開頁面的情況，剛好同事的手機也遇到同樣的情況，拿來分析之后發(fā)現(xiàn)，是運營商劫持了流量，往里面塞了廣告 js ，結(jié)果它的服務(wù)器還出錯.....解決方案是上 https ，完美解決。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因為版本問題在創(chuàng)建項目時出現(xiàn)的各種報錯問題,這次在運行時出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下2023-04-04
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要給大家分享了vue全局過濾器概念及注意事項和基本使用方法，下面文字圍繞vue全局過濾器的相關(guān)資料展開具體的詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對你有所幫助2021-11-11
本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個函數(shù)，解釋一下這部分的原理內(nèi)容，感興趣的朋友跟隨小編一起看看吧2021-11-11
vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下2023-07-07
多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁vue應(yīng)用的單頁面打包方法(內(nèi)含打包模式的應(yīng)用)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue對象拷貝,解決由于引用賦值修改原對象的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何用Vue3和p5.js打造一個交互式圖像動畫,文中給出了詳細(xì)的代碼示例,本代碼適用于需要在網(wǎng)頁中實現(xiàn)圖像滑動效果的場景,例如圖片瀏覽、相冊展示等,感興趣的小伙伴跟著小編一起來看看吧2024-06-06