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

Posted 2022-10-01 leiting

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

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

首先出现的报错是 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版本下载并安装