vue 解決IOS10低版本白屏的問題
新公司是做自己的獨立產品，比之前呆過的外包公司要求嚴格的多，注重使用者體驗，以下是在新專案裡進行前端優化的一些操作
一，低版本空白屏問題，以及ios8的樣式問題
本專案是通過vue-cli搭建，上線以後執行在新版本的蘋果手機和安卓手機上均無問題。但是在ios8 9上出現了空白屏的原理，經過測試以後發現是低版本不相容es6的語法，經過幾番嘗試找到了最優解。
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檔案，將註釋程式碼替換成紅色方框內的程式碼即可，如圖3
二 打包之後的檔案以及生成的vendor檔案過大的問題
1打包檔案過大的問題
找到config底下的index.js檔案，在69行的程式碼productionSourceMap:true,將true改為false。不然在最終打包的檔案中會出現一些map檔案，map檔案的作用在於：專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。有了map就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯。但是這裡為了瘦身大業，可以捨去。
2生成的vendor檔案過大的問題
vendor檔案裡會將專案中vue vue-router mint-ui element-ui等庫和框架一起打包壓縮，這樣必定會佔用空間，造成壓縮包過大。通常都有好幾百k至少超過1M，在載入頁面的時候會極度耗時。
這裡建議使用cdn 然後在build裡找到webpack.base.conf，加入平常不改動的庫，如圖4所示，然後在入口頁面index.html匯入相應的cdn
同時要在專案裡把諸如圖5這樣的匯入都去除，否則打包的時候依然會佔用空間，我專案裡這樣優化之後，vendor大小由239k優化到10k,減小的20倍
三 壓縮圖片 ，推薦一個壓縮圖片的工具 https://tinypng.com/
如果有更改好的工具可以留言告知~
補充知識：vue-cli構建的移動端專案ios9以下開啟頁面空白問題
造成ios9一下頁面空白問題，個人遇到的是專案npm run build之後，專案裡es6沒有轉成es5造成的。
vue-cli構建的本身已經配置好babel,es6的轉碼，但是還遇到這個問題。
那麼可能的原因是引入的檔案沒有轉碼，像我個人把http.js寫在了static/js/http.js裡了。 在static這個資料夾下。專案編譯這個檔案本身不打包。所有寫在這裡的es6沒有轉成es5.
所有要把js檔案移入src下的assets，或者自建的資料夾
ios9以下頁面空白如果是其他方面引起的可以考慮在pc端IE瀏覽器的Edge除錯。把錯誤都排除了，能夠頁面顯示出來，那麼基本就成功了。
IE會報vuex requires a Promise polyfill in this browser這個錯誤，成這種現象的原因歸根究底就是瀏覽器對ES6中的promise無法支援，因此需要通過引入babel-polyfill來是我們的瀏覽器正常使用es6的功能
解決辦法：安裝babel-polyfill這個依賴 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低版本白屏的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。