网上配置的方法很多，但是很多人都不知道怎么去配置它的版本兼容，自己研究了下， 终于找到方案了，下面就一步步给大家讲解下。先说下怎么在webstorm下配置吧，虽然网上很多。

配置Autoprefixer

其实在玩Grunt中配置PostCss（推荐使用此插件）的时候， 在他的文档最底部有这么一句话。

工具.png
如果你还在使用此版本的话，那你可以直接使用了。但是现在是18年啊，怎么可能还在用呢。

第一步：安装node.js

嫌npm下载太慢，可以安装一个cnpm淘宝npm镜像，安装方式：npm install -g cnpm --registry=https://registry.npm.taobao.org， 下面我就直接使用cnpm了。

第二步：安装Autoprefixer

cnpm i autoprefixer -g

第三步：安装postcss-cli

cnpm i postcss-cli -g

第四步：设置webstorm

File -> Settings -> Tools -> External Toools 点击+号新增

autoprefixer.png

Program: C:\Users\user\AppData\Roaming\npm\postcss.cmd  
Parameters: -u autoprefixer -o $FileDir$\$FileName$  $FileDir$\$FileName$
Working directory: $ProjectFileDir$

第五步：设置快捷键

快捷键.png 快捷键1.png

第六步：验证效果

我们先写一段代码：

# 编译前代码
.autoprefixer {
    display: flex;
    flex-wrap: wrap;
}

# 编译后代码
.autoprefixer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

通过对比我们发现，它还是少了很多东西，比如火狐的-moz-,或者我想要的其他兼容写法都没有实现，那么该怎么办呢。凉拌吧

版本兼容

Autoprefixer使用Browserslist，所以你可以通过类似于last 2 versions 或者其它方式来实现你项目中所需要的浏览器版本控制。有关查询，浏览器名称，配置格式和默认值，请参阅Browserslist文档。
现在我们根据文档提示进行操作，通过.browserslistrc配置或package.json使用browserslist属性是实现

# .browserslistrc 配置
iOS >= 7
Android > 4.1
Firefox > 20
last 2 versions

# package.json
{
  "browserslist": [
    "iOS >= 7",
    "Android > 4.1",
    "Firefox > 20",
    "last 2 versions"
  ]
}

这时候我们发现他生成的代码还是跟之前一样的，这里有一万个草泥马在奔腾。多次研究文档，还是没作用，可能是自己哪里还是没有配置好......
这时候拿起水杯喝了口水，灵光乍现啊。你既然已经配置好了默认的，我直接改你默认的不就好了，虽然实现方式笨了点， 但是也可以解决啊。我们安装的Autoprefixer是在全局目录，找到对应的文件，他又是通过Browserslist来实现版本控制的，最后在C:\Users\user\AppData\Roaming\npm\node_modules\autoprefixer\node_modules\browserslist\index.js找到了这么一段代码，直接修改

# index.js
// Default browsers query
// browserslist.defaults = [ // 屏蔽默认
//   '> 1%',
//   'last 2 versions',
//   'Firefox ESR'
// ]
browserslist.defaults = [
  "iOS >= 7",
  "Android > 4.1",
  "Firefox > 20",
  "last 2 versions"
]

直接修改我所需要的兼容方式

# 默认的browserslist 生成的代码
.autoprefixer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

# 修改后browserslist 生成的代码
.autoprefixer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

完成，收工。如果各位有什么更好的实现方式，请赐教