首页 > 技术文章 > vue-cli3 ios10白屏问题解决思路

leiting 2019-09-04 18:35 原文

在出现了这个问题之后先不要盲目的去瞎试,根据网上的方法试了个遍也没解决问题

先看报的是什么错,再针对的解决问题

首先出现的报错是 SyntaxError: Unexpected token '*'  在打包后的dist文件里搜了下连乘 ** 果然有,说明没有转编译成功

这个错误的出现是由于 ios10 是不支持连乘引起的,如果发现自己的代码里有这个的使用,那最好换下,或者转编译

这次遇到的是自己代码里没写,找了半天原来是swiper引起的,那看看能怎么解决。

搜了下发现无非就几种方法:

https://github.com/surmon-china/vue-awesome-swiper/issues/220

1. 用babel-plugin-transform-exponentiation-operator等类似工具转编译,于是试了几种babel包工具,并没有生效还是报这个错

 

2. 在配置文件里把swiper包包含进去

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

 

but ... 这种方式看似生效,倒是没报SyntaxError: Unexpected token '*' 这个错了,但貌似引起了其他问题 

开启新一轮的报错

SyntaxError: Unexpected token '...'. Expected a property name.

打包后的**连乘符号没有了,但是es6的...扩展运算符本来之前编译成功了的,这时候却失败了

然后说是安装babel转编译插件。。也都完全没有成功

 

3. swiper已经是最新版的4.x的了,最终的解决方式是吧swiper卸载,改用vue-awesome-swiper 虽然这个也是在swiper的基础上写的插件。但是换这个之后就没报错了,估计是在这个里面解决了这个错误。

 

 

swiper的问题解决完之后,又发现新报错

推荐阅读