前端开发时，为了兼容所有浏览器，部分css属性需要加上不同的浏览器前缀，手动添加，多太多工作量，推荐使用Autoprefixer插件，能够快速补全css3代码

安装（vue-cli3）

1.前置依赖安装

npm install -D css-loader style-loader

2.postcss相关依赖

npm install -D postcss-loader autoprefixer postcss

3.vue.config.js中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

4. 配置autoprefixer

方式一：在postcss.config.js进行配置

module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近2个版本
        ],
        grid: true
      }
    }
}

方式二：

1：在posscss.config.js 文件配置

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

2：在package.json使用 browserslist 字段

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