vue-cli3 ios10白屏问题解决思路

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

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

首先出现的报错是 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的问题解决完之后,又发现新报错😢

ReferenceError: Can't find variable: URLSearchParams

这个的原因是因为ios10 并不支持这个语法😭

解决方法:

先安装

npm install url-search-params-polyfill --save

再在使用的时候引入

require('url-search-params-polyfill');     // 或者
import 'url-search-params-polyfill'

 

至此,终于解决,其间走了好多弯路,拖了两三天才解决。

调试可以mac连真机 safari 调试,可以看到打印出来的错误,当然,如果没有相应版本的真机,建议用模拟器,mac上xcode 带ios simulator, 

当然一般现在已经没有带ios10版本了,需要下载相应版本的 component 

打开xcode > Behaviors > Edit Behaviors > Component > 选择需要的 Simulator版本下载并安装

 

posted @ 2019-09-04 18:35  c-137Summer  阅读(2119)  评论(0编辑  收藏