vue打包 ios10 白屏

vue ios10.0 变异后白屏

前端早读课公众号,2018年2月7日内容,认为其很有意义,记录于此

用vue框架开发的SPA在所有的环境下都可以正常显示,除了在ios10的手机上跑不起来,无论是微信浏览器还是Safari浏览器,都只能看到一个白白的屏幕。

手机连接电脑后,在电脑端的Safari里,报错如下:

SyntaxError: Cannot declare a let variable twice: ‘e’.
但事实上,并没有写过这样的代码,而webpack编译后的语句是这样的:

let e = e => {
console.log(e);
for (let e of [1, 2, 3])
console.log(e);
};

这段语法,在es6的标准中是没有错的,但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文件
在UglifyJsPlugin的定义里添加关于mangle的选项,如下:
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

another bug
有另外一个bug也会影响到vue网页在iOS 10上的展现,特别是当你用到广为流传的Swiper插件的时候。这是因为Swiper插件中用到了ES6的语法a = b c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,所以你需要让Swiper经过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。

解决方法:
在项目根目录下新建一个文件vue.config.js,在里面添加如下语句:

module.exports = {
chainWebpack: config => {
config.rule(‘js’).include.add(/node_modules/(dom7|swiper)/.*/)
}
}

至此全部解决。

作者:runOnWay
来源:CSDN
原文:https://blog.csdn.net/runonway/article/details/79278765

展开阅读全文

没有更多推荐了,返回首页