Vue兼容低版本Android、iOS设备实践

[hsingyin]

背景

在低版本的Android或者iOS设备下，H5会出现白屏的现象，打开控制台发现报错了许多错误。（这里针对vue-cli2.X项目）

原因

原因是Android 6.0和iOS 10以下对ES6新语法不兼容，现在低版本的系统在市场上仍有一部分占比，虽然不想兼容但是莫得办法

解决方案

1. 引入babel-polyfill

• 安装babel-polyfill、es6-promise
• main.js中引用babel-polyfill、es6-promise

  import 'babel-polyfill';
  import Es6Promise from 'es6-promise';
  require('es6-promise').polyfill();
  Es6Promise.polyfill()

  2. 配置项目的.babelrc文件

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",["import", {
    "libraryName": "vant",
    "libraryDirectory": "es",
    "style": true
  }]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node",["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]]
    }
  }
}

3. 检查依赖、静态资源js是否用了高级语法（因为babel会忽略node_modules，导致依赖包中的ES6语法无法被转换）

• 用到了vant、sm-crypto依赖包有高级语法需要转换向后兼容，配置build/webpack.base.conf.js

//  build/webpack.base.conf.js
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },
...
{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'), 
          resolve('test'),  
          // 将需要转译的模块包括进来
          resolve('node_modules/sm-crypto'), 
          resolve('node_modules/vant'), 
          resolve('node_modules/webpack-dev-server/client')
        ]
}

• 个人项目中有使用到静态资源文件static/js/serviceConfig.js（因为不会被编译）里面的一些变量使用的模板字符串要改成通常的写法，let、const也得换成var

[hsingyin]

近期发现原先写法得变一下。不然有时候会提示重复引入了babel-polyfill 解决方案是原先main.js中的对babel-polyfill的引入去掉，更新build/webpack.base.conf.js写法。

// main.js
// import 'babel-polyfill';
import Es6Promise from 'es6-promise';
require('es6-promise').polyfill();
Es6Promise.polyfill()

// build/webpack.base.conf.js
entry: {
   // app: ["babel-polyfill", "./src/main.js"]
   "babel-polyfill": "babel-polyfill",
   app: './src/main.js'
 },