关于处理移动端Vue单页面及其内嵌兼容问题

关于处理移动端Vue单页面及其内嵌兼容问题

question:由于最近转移了以前的H5项目，重构使用Vue单页面，导致部分手机内嵌或在微信浏览器中无法浏览，或者无法使用ajax请求；手机机型千变万化，系统版本也各种各样，通宵优化上线后成功处理问题 ，也只是兼容大部分主流手机，虽然解决方案并不是很突出，但是查找问题的路太痛苦了

1. 首先需要解决低版本系统的移动端无法渲染页面，因为低版本浏览器只支持ES5语法，而我在写单页面时基本都使用了ES6语法，所以首先需要全局把ES6语法转换为ES5语法

   这里引用了 babel-polyfill，可以处理使ES6语法转换成ES5语法；

   还有es6-promise，可以处理在低版本中使用Promise，相关ES6 Promise可查询资料 ；

   1.1 安装插件babel-polyfill和es6-promise:npm i babel-polyfill es6-promise --save

   1.2 在main.js文件中添加以下代码：

   import 'babel-polyfill'
   import Vue from 'vue'
   import Es6Promise from 'es6-promise'
   Es6Promise.polyfill()

   1.3 最后在 build/webpack.base.conf.js 文件中配置：

   module.exports = {
    ...
        entry: {
        app: ["babel-polyfill", "./src/main.js"]
        }
        ...
   }

   1.4 有可能这时run会报错，需要停止重新运行一下

2. 在第1步完成时有可能打包后低版本页面展示还是空白，这时检测一下引用的组件是否使用ES6语法的组件(十几个组件一个个排除真是比较痛苦)，babel-polyfill在默认状态下不对node_modules里的模块进行编译的，而这里我使用了js-pinyin第三方组件，这个组件在npmjs中标记ES6，只好去掉并让接口处理汉字转拼音了，页面修改了下，打包后终于好了！

3. 页面正常了，这时在IOS9上ajax请求出问题了(还有vivo 5.x android版本系统及其他)，让移动端监测拿错误日志看到的结果，分析由于使用了axios，而axios的github上很明确的标注了

不支持IOS9、IOS10.0，从10.11开始支持，解决方式就是我这边之前引用了jquery（其实不应该引用jquery），使用jquery的ajax来调，搞定

1. 其他解决：

   4.1 webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下 打开为白屏，版本太高了，当时装的时候就按照最新的装了，这里制定下webpack-dev-server 的版本：npm install --save-dev [email protected]

   4.2 在IOS 10上有可能白屏，这里 build/webpack.prod.conf.js

   找到这块代码，在compress后方添加mangle的配置

   new UglifyJsPlugin({
         uglifyOptions: {
           compress: {
             warnings: false
           },
           mangle: {
             safari10: true
           }
         },
         sourceMap: config.build.productionSourceMap,
         parallel: true
   })

总结下：使用第三方组件一定要排查兼容性，自己踩的坑含着泪也要填成堆