Vue PostCss插件——autoprefixer，自动补全css浏览器前缀

Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。
可以实现css3代码自动补全，也可以运用到sass、less中

前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。
当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
Autoprefixer 就能很方便的解决上述问题，简化我们的开发模式。

一、我们先来瞧一瞧Autoprefixer 的效果

Autoprefixer处理前css代码

display: flex;

Autoprefixer处理后css代码

display: -webkit-box;
display: -ms-flexbox;
display: flex;

二、autoprefixer安装步骤(vue-cli3)

1. 前置依赖安装

npm install -D css-loader style-loader

2. 安装postcss依赖相关依赖

npm install -D postcss-loader autoprefixer postcss

3. 在webpack.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
        }
      }
  }
  

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

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

• 方式三：分为两步
  • 第一步，在posscss.config.js 文件配置

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

  • 第二步，在package.json使用 browserslist 字段

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

三、常见错误

ERROR Failed to compile with 1 errors

ERROR  Failed to compile with 1 errors                                                             
error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\11411\Desktop\wk\iphone\src\main.js: C:\Users\11411\Desktop\wk\iphone contains 
both .browserslistrc and package.json with browsers (While processing: "C:\\Users\\11411\\Desktop\\wk\\iphone\\node_modules\\@vue\\cli-plugin-babel\\preset.js")
    at C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:313:15
    at eachParent (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:48:18)
    at Object.findConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:285:20)
    at Function.loadConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:218:37)
    at browserslist (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\index.js:411:31)
    at getTargets (C:\Users\11411\Desktop\wk\iphone\node_modules\@babel\helper-compilation-targets\lib\index.js:199:48)
    at module.exports (C:\Users\11411\Desktop\wk\iphone\node_modules\@vue\babel-preset-app\index.js:150:17)        
    at C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\config\full.js:199:14     
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:254:32)
    at evaluateAsync (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:284:5)  
    at Function.errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:108:7)
    at errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:183:31)

 @ multi (webpack)-dev-server/client?http://10.172.3.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

错误原因分析：

根目录.browserslistrc文件，和package.json的browserslist的相关配置，两者作用相同，同时引用存在冲突。

解决办法：

删除.browserslistrc文件，在package.json中对browserslist进行配置。

---

个人站点：足各路的博客、掘金、CSDN。关注足各路、前端不迷路！