该页面记录移动web开发过程中遇到的各种坑

因Android4.4-只支持旧版Flexbox标准，因此在移动端中使用Flexbox需要配置autoprefixer

browsers: ['Android >= 4.0', 'iOS >= 7']

浏览器：Android4.0-Android4.3

flexbox浏览器兼容性

Android4.4-不支持flex-wrap特性，没有workaround，需要用到wrap特性的地方都需要换成inline-block实现

浏览器：Android4.0-Android4.3

display:flex元素下的子元素都要为块级元素，否则display: flex不会生效，将会表现为行内元素的特性

例子如下：

<template>
  <div class="flex">
    <!-- broken on android4.4- -->
    <span class="name">name</span>
    <img class="avatar" />
  </div>
</template>
<style>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

目前移动端代码都用ECMAScript 2015编写，再使用Babel编译为es5，然而常用的es2015 preset在创建模块时默认添加了__esModule属性

Object.defineProperty(exports, '__esModule', {value: true});

所以会导致报错：

Cannot assign to read only property ‘__esModule’

解决方法：

使用loose模式，安装es2015-loose包

npm i babel-preset-es2015 babel-preset-es2015-loose
sed -i 's|es2015|es2015-loose|g' ./.babelrc