欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 解決IOS10低版本白屏的問題

 更新時(shí)間:2020年11月17日 09:12:19   作者:芒果大餅  
這篇文章主要介紹了vue 解決IOS10低版本白屏的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

新公司是做自己的獨(dú)立產(chǎn)品,比之前呆過的外包公司要求嚴(yán)格的多,注重用戶體驗(yàn),以下是在新項(xiàng)目里進(jìn)行前端優(yōu)化的一些操作

一,低版本空白屏問題,以及ios8的樣式問題

本項(xiàng)目是通過vue-cli搭建,上線以后運(yùn)行在新版本的蘋果手機(jī)和安卓手機(jī)上均無問題。但是在ios8 9上出現(xiàn)了空白屏的原理,經(jīng)過測試以后發(fā)現(xiàn)是低版本不兼容es6的語法,經(jīng)過幾番嘗試找到了最優(yōu)解。

1 空白屏問題

首先安裝babel-polyfill,安裝命令:npm install --save-dev babel-polyfill

安裝成功后找到webpack.base.conf里把第16行的代碼換成第17行的寫法,如圖1所示

相同的頁面,加入紅色方框里的代碼,如圖2所示

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "babel-loader"
  },

2 樣式問題

找到webpack.prod.conf文件,將注釋代碼替換成紅色方框內(nèi)的代碼即可,如圖3

二 打包之后的文件以及生成的vendor文件過大的問題

1打包文件過大的問題

找到config底下的index.js文件,在69行的代碼productionSourceMap:true,將true改為false。不然在最終打包的文件中會(huì)出現(xiàn)一些map文件,map文件的作用在于:項(xiàng)目打包后,代碼都是經(jīng)過壓縮加密的,如果運(yùn)行時(shí)報(bào)錯(cuò),輸出的錯(cuò)誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。有了map就可以像未加密的代碼一樣,準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。但是這里為了瘦身大業(yè),可以舍去。

2生成的vendor文件過大的問題

vendor文件里會(huì)將項(xiàng)目中vue vue-router mint-ui element-ui等庫和框架一起打包壓縮,這樣必定會(huì)占用空間,造成壓縮包過大。通常都有好幾百k至少超過1M,在加載頁面的時(shí)候會(huì)極度耗時(shí)。

這里建議使用cdn 然后在build里找到webpack.base.conf,加入平常不改動(dòng)的庫,如圖4所示,然后在入口頁面index.html導(dǎo)入相應(yīng)的cdn

同時(shí)要在項(xiàng)目里把諸如圖5這樣的導(dǎo)入都去除,否則打包的時(shí)候依然會(huì)占用空間,我項(xiàng)目里這樣優(yōu)化之后,vendor大小由239k優(yōu)化到10k,減小的20倍

三 壓縮圖片 ,推薦一個(gè)壓縮圖片的工具 https://tinypng.com/

如果有更改好的工具可以留言告知~

補(bǔ)充知識:vue-cli構(gòu)建的移動(dòng)端項(xiàng)目ios9以下打開頁面空白問題

造成ios9一下頁面空白問題,個(gè)人遇到的是項(xiàng)目npm run build之后,項(xiàng)目里es6沒有轉(zhuǎn)成es5造成的。

vue-cli構(gòu)建的本身已經(jīng)配置好babel,es6的轉(zhuǎn)碼,但是還遇到這個(gè)問題。

那么可能的原因是引入的文件沒有轉(zhuǎn)碼,像我個(gè)人把http.js寫在了static/js/http.js里了。 在static這個(gè)文件夾下。項(xiàng)目編譯這個(gè)文件本身不打包。所有寫在這里的es6沒有轉(zhuǎn)成es5.

所有要把js文件移入src下的assets,或者自建的文件夾

ios9以下頁面空白如果是其他方面引起的可以考慮在pc端IE瀏覽器的Edge調(diào)試。把錯(cuò)誤都排除了,能夠頁面顯示出來,那么基本就成功了。

IE會(huì)報(bào)vuex requires a Promise polyfill in this browser這個(gè)錯(cuò)誤,成這種現(xiàn)象的原因歸根究底就是瀏覽器對ES6中的promise無法支持,因此需要通過引入babel-polyfill來是我們的瀏覽器正常使用es6的功能

解決辦法:安裝babel-polyfill這個(gè)依賴 cnpm install –save-dev babel-polyfill

然后在build下的webpack.base.conf.js文件中,使用

const webpackConfig = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: ["babel-polyfill", "./src/main.js"]
 }

以上這篇vue 解決IOS10低版本白屏的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 怎樣在vue項(xiàng)目下添加ESLint的方法

    怎樣在vue項(xiàng)目下添加ESLint的方法

    這篇文章主要介紹了怎樣在vue項(xiàng)目下添加ESLint的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼

    Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼

    本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • 淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題

    淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題

    今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題,具有很好的價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue3 動(dòng)態(tài)ref問題及解決

    Vue3 動(dòng)態(tài)ref問題及解決

    Vue3動(dòng)態(tài)ref在組件卸載后保留key,值置為null,需手動(dòng)檢查null以避免錯(cuò)誤,不可刪除key,此為設(shè)計(jì)行為,旨在維護(hù)響應(yīng)式結(jié)構(gòu)完整性及性能優(yōu)化
    2025-07-07
  • Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例

    Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例

    這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實(shí)例形式分析了vue2.0組件之間通信的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-05-05
  • 關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號

    關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號

    這篇文章主要介紹了關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號,通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列,方法的參數(shù)是一個(gè)對象,感興趣的朋友可以學(xué)習(xí)一下
    2023-04-04
  • vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼

    vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼

    這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • Vue?中?provide和inject的使用

    Vue?中?provide和inject的使用

    這篇文章主要介紹了Vue中provide和inject的使用,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-08-08
  • vue router 傳參獲取不到的解決方式

    vue router 傳參獲取不到的解決方式

    今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)

    Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)

    這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件,第二步子組件向父組件傳值,本文通過需要的朋友可以參考下
    2022-11-11

最新評論