在ios8 版本上的h5对flex的支持不太好，需要有兼容的写法。

vue-cli自带了postCss autoprefixer 进行兼容处理，配置如下

在vue-loader.config.js中开启 usePostCSS: true

module.exports = {

  loaders: utils.cssLoaders({

    sourceMap: sourceMapEnabled,

    extract: isProduction,

    usePostCSS:true  // 开启 usePostCSS

  }),

  cssSourceMap: sourceMapEnabled,

  cacheBusting: config.dev.cacheBusting,

  transformToRequire: {

    video: ['src', 'poster'],

    source: 'src',

    img: 'src',

    image: 'xlink:href'

  }

}

解决插件冲突

配置后发现在开发环境时，正常添加环境，而生产环境打包的并没有添加兼容的前缀。

原因： vue-cli构建项目时 在webpack.prd.conf.js中使用了插件， optimize-css-assets-webpack-plugin,和postCss发生冲突。

// webpack.prd.conf.js

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

new OptimizeCSSPlugin({

  cssProcessorOptions: config.build.productionSourceMap

    ? { safe: true, map: { inline: false } }

    : { safe: true }

}),

解决：

1. 直接注释掉

//  new OptimizeCSSPlugin({

//  cssProcessorOptions: config.build.productionSourceMap

//   ? { safe: true, map: { inline: false } }

//   : { safe: true }

//  }),

带来的问题就是 css没有进行压缩处理

2. 对这个的插件的参数进行配置

   new OptimizeCSSPlugin({

      // cssProcessorOptions: config.build.productionSourceMap

      //   ? { safe: true, map: { inline: false } }

      //   : { safe: true }

      // 对这个的插件的参数进行配置

      cssProcessorOptions: {

        safe: true,

        // 禁用此插件的autoprefixer功能，因为要使通过postcss来使用

        autoprefixer: false,

        discardComments: {

           removeAll: true

         }

      },

      canPrint: true

    }),