一個(gè)bug 你用Vue做了一個(gè)單頁面應(yīng)用，它在一切設(shè)備上都工作正常，但是突然有一天，你的測試和你說，這個(gè)網(wǎng)站在iOS 10上跑不起來，怎么辦？于是你打開你電腦上的Chrome瀏覽器，工作正常；打開Safari瀏覽器，工作正常；打開iOS 11手機(jī)，工作正常；打開各種安卓手機(jī)，工作正常。但是在iOS 10的手機(jī)上，不論是微信瀏覽器，還是Safari瀏覽器，都只能看見一個(gè)白白的屏幕。于是你把手機(jī)連上電腦，在電腦端的Safari里，看到了如下的錯(cuò)誤：SyntaxError: Cannot declare a let variable twice: 'e'. 可是你沒有寫過這樣的代碼，你怎么可能把一個(gè)名為e的變量定義兩次？你打開代碼，看到了這樣美麗的代碼：let e = e => {console.log(e);for (let e of [1, 2, 3])console.log(e); }; 雖然這段代碼看上去比較奇怪，但是語法上有任何問題嗎？哥就愿意定義一個(gè)名為e的函數(shù)，而這個(gè)函數(shù)的唯一入?yún)⒚Q也為e，并且哥的for循環(huán)體里還愿意再定義一個(gè)名稱為e的變量，es6的變量作用域允許我們這樣做，此e和彼e互不干擾，不對(duì)嗎？況且很顯然，這段代碼不是人寫的，而是我們?cè)趫?zhí)行npm run build的時(shí)候編譯產(chǎn)生的。其實(shí)我們都沒有錯(cuò)，我們也沒寫錯(cuò)，uglify也沒搞錯(cuò)，錯(cuò)的是Safari本身。他們?cè)诘谑呷f一千零四十一號(hào)bug中承認(rèn)了自己的錯(cuò)誤：We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter 當(dāng)你定義一個(gè)與參數(shù)同名的for循環(huán)迭代變量時(shí)，我們錯(cuò)誤地認(rèn)為這是一個(gè)語法錯(cuò)誤。 看，多么謙遜的態(tài)度。所以你也不用太糾結(jié)于一個(gè)白屏幕，只要找到解決方法就好了。方法其實(shí)很簡單：進(jìn)入build文件夾； 找到webpack.prod.conf.js文件； 在UglifyPlugin的定義里添加關(guān)于mangle的選項(xiàng)，使它變成下面這個(gè)樣子：new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false}, mangle: { // 加入這玩意兒即可safari10: true}},sourceMap: config.build.productionSourceMap,parallel: true}), 然后這個(gè)世界就太平了。為了避免所有這些不必要的麻煩，我給vue-cli提的一個(gè)PR已被接受，在工具里缺省加入了這個(gè)選項(xiàng)，這樣大家以后就不會(huì)遇到這個(gè)問題了。關(guān)于這個(gè)bug的問題描述在這里，解決方案在這里，給vue-cli提的PR在這里，供深挖細(xì)掘的人參考。另一個(gè)bug 實(shí)際上，除此之外，還有另外一個(gè)bug也會(huì)影響到vue網(wǎng)頁在iOS 10上的展現(xiàn)，特別是當(dāng)你用到廣為流傳的Swiper插件的時(shí)候。這是因?yàn)镾wiper插件中用到了ES6的語法a = b ** c，a是b的c次方，而iOS 10的Safari里不認(rèn)識(shí)這樣的語法，認(rèn)為這是一個(gè)錯(cuò)誤，所以你需要讓Swiper經(jīng)過babel的包裝，而缺省狀態(tài)下babel是不對(duì)node_modules里的模塊進(jìn)行編譯的。相關(guān)的issue見這里。解決方法是在項(xiàng)目根目錄下新建一個(gè)文件vue.config.js，在里面添加如下語句：module.exports = {chainWebpack: config => {config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)} } 至止為止，通常情況下你的vue網(wǎng)頁已經(jīng)可以完美地在iOS 10上的Safari里展現(xiàn)了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/hjptopshow/p/9848908.html

總結(jié)

以上是生活随笔為你收集整理的Vue单页面在ios10系统上出现白屏的bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。