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\_@[email protected]@@babel\core\lib\config\full.js:199:14     
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\11411\Desktop\wk\iphone\node_modules\_@[email protected]@@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:254:32)
    at evaluateAsync (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:284:5)  
    at Function.errback (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:108:7)
    at errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_@[email protected]@@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@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進行配置。