一个bug 你用Vue作了一个单页面应用,它在一切设备上都工做正常,可是忽然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办? 因而你打开你电脑上的Chrome浏览器,工做正常;打开Safari浏览器,工做正常;打开iOS 11手机,工做正常;打开各类安卓手机,工做正常。可是在iOS 10的手机上,不管是微信浏览器,仍是Safari浏览器,都只能看见一个白白的屏幕。 因而你把手机连上电脑,在电脑端的Safari里,看到了以下的错误: SyntaxError: Cannot declare a let variable twice: 'e'. 但是你没有写过这样的代码,你怎么可能把一个名为e的变量定义两次?你打开代码,看到了这样美丽的代码: let e = e => { console.log(e); for (let e of [1, 2, 3]) console.log(e); }; 虽然这段代码看上去比较奇怪,可是语法上有任何问题吗?哥就愿意定义一个名为e的函数,而这个函数的惟一入参名称也为e,而且哥的for循环体里还愿意再定义一个名称为e的变量,es6的变量做用域容许咱们这样作,此e和彼e互不干扰,不对吗?何况很显然,这段代码不是人写的,而是咱们在执行npm run build的时候编译产生的。 其实咱们都没有错,咱们也没写错,uglify也没搞错,错的是Safari自己。他们在第十七万一千零四十一号bug中认可了本身的错误: We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter 当你定义一个与参数同名的for循环迭代变量时,咱们错误地认为这是一个语法错误。 看,多么谦逊的态度。因此你也不用太纠结于一个白屏幕,只要找到解决方法就行了。方法其实很简单: 进入build文件夹; 找到webpack.prod.conf.js文件; 在UglifyPlugin的定义里添加关于mangle的选项,使它变成下面这个样子: new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, mangle: { // 加入这玩意儿便可 safari10: true } }, sourceMap: config.build.productionSourceMap, parallel: true }), 而后这个世界就太平了。 为了不全部这些没必要要的麻烦,我给vue-cli提的一个PR已被接受,在工具里缺省加入了这个选项,这样你们之后就不会遇到这个问题了。 关于这个bug的问题描述在这里,解决方案在这里,给vue-cli提的PR在这里,供深挖细掘的人参考。 另外一个bug 实际上,除此以外,还有另一个bug也会影响到vue网页在iOS 10上的展示,特别是当你用到广为流传的Swiper插件的时候。这是由于Swiper插件中用到了ES6的语法a = b ** c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,因此你须要让Swiper通过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。相关的issue见这里。 解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加以下语句: module.exports = { chainWebpack: config => { config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/) } } 至止为止,一般状况下你的vue网页已经能够完美地在iOS 10上的Safari里展示了。