2023年7月7日发(作者：)

VuePostCss插件——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-loader2. 安装postcss依赖相关依赖npm install -D postcss-loader autoprefixer postcss3. 在中进⾏配置s = { module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader", "postcss-loader"] } ] }}4. 配置autoprefixer⽅式⼀：在进⾏配置s = { plugins: { //

兼容浏览器，添加前缀 'autoprefixer':{ overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" //'last 10 versions', //

所有主流浏览器最近2个版本 ], grid: true } }}⽅式⼆：在进⾏配置s = { plugins: [ //

兼容浏览器，添加前缀 require('autoprefixer')({ overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" //'last 2 versions', //

所有主流浏览器最近2个版本 ],grid: true})

] }⽅式三：分为两步第⼀步，在 ⽂件配置 s = { plugins: [ require('autoprefixer')() ] }第⼆步，在使⽤ 字段"browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ]三、常见错误ERROR Failed to compile with 1 errorsERROR Failed to compile with 1 errors

error in ./src/le build failed (from ./node_modules/babel-loader/lib/):BrowserslistError: [BABEL] C:: C:Users11411Desktopwkiphone contains

both .browserslistrc and with browsers (While processing: "C:Users11411Desktopwkiphonenode_modules@") at C:Users11411Desktopwkiphonenode_:313:15 at eachParent (C:Users11411Desktopwkiphonenode_:48:18) at nfig (C:Users11411Desktopwkiphonenode_:285:20) at nfig (C:Users11411Desktopwkiphonenode_:218:37) at browserslist (C:Users11411Desktopwkiphonenode_:411:31) at getTargets (C:Users11411Desktopwkiphonenode_modules@:199:48) at s (C:Users11411Desktopwkiphonenode_modules@:150:17)

at C:Users11411Desktopwkiphonenode_modules_@babel_core@7.10.3@@:199:14

at () at Function. (C:Users11411Desktopwkiphonenode_modules_@babel_core@7.10.3@@:26:3) at () at step (C:Users11411Desktopwkiphonenode_modules_gensync@1.0.0-beta.1@:254:32) at evaluateAsync (C:Users11411Desktopwkiphonenode_modules_gensync@1.0.0-beta.1@:284:5)

at k (C:Users11411Desktopwkiphonenode_modules_gensync@1.0.0-beta.1@:108:7) at errback (C:Users11411Desktopwkiphonenode_modules_@babel_core@7.10.3@@:70:18) at async (C:Users11411Desktopwkiphonenode_modules_gensync@1.0.0-beta.1@:183:31) @ multi (webpack)-dev-server/client?10.172.3.102:8080&sockPath=/sockjs-node (webpack)/hot/ ./src/错误原因分析：根⽬录.browserslistrc⽂件，和的browserslist的相关配置，两者作⽤相同，同时引⽤存在冲突。解决办法：删除.browserslistrc⽂件，在中对browserslist进⾏配置。