vue-cli3.0配置autoprefixer+postcss-plugin-px2rem（从创建开始）

前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。这里配置autoprefixer css后处理器自动兼容
看下效果

先单独配置autoprefixer CSS，less,sass都有用

1.vue create XXX 项目
这个就不多说了

2.安装相关依赖

npm install -D css-loader style-loader
npm install -D postcss-loader autoprefixer postcss(这个我装的时候失败了，之后用的cnpm)

安装成功如下：

3.根目录下创建postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

4.package.json中最后加入
下面的是控制浏览器，移动段版本

devDependencies{
	.....
}
"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

5.如果有.browserslistrc 删除，会冲突

6.效果

二.移动段rem插件使用 postcss-plugin-px2rem

postcss.config.js

module.exports = {
        plugins: {
            'autoprefixer': {
                overrideBrowserslist: [
                    "Android 4.1",
                    "iOS 7.1",
                    "Chrome > 31",
                    "ff > 31",
                    "ie >= 8"
                    //'last 2 versions', // 所有主流浏览器最近2个版本
                ],
                grid: true
            },
            'postcss-plugin-px2rem': {
                // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                // propBlackList: [], //黑名单
                exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                // selectorBlackList: [], //要忽略并保留为px的选择器
                // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }
        }
    }
    

注意：原来引入css插件可以在vue.config.js中

但是.这里会跟postcss.config.js冲突，将autoprefixer写在vue.config.js中，会报错。所以将引入的插件全部写入postcss.config.js

报错：

autoprefixer版本过高 可以降版本处理 npm i postcss-loader autoprefixer@8.0.0

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:。。。。。