Autoprefixer是否生效取决于browserslist配置准确、PostCSS真实介入构建流程、压缩阶段不覆盖前缀三者缺一不可；它仅依据browserslist和caniuse-db数据自动添加前缀，不转译语法、不处理运行时样式。
Autoprefixer 不是“装了就自动生效”的黑盒工具，它是否真正起作用，完全取决于 browserslist 配置是否准确、PostCSS 是否真实介入构建流程、以及压缩阶段是否意外覆盖前缀——三者缺一不可。
确认 browserslist 是唯一可信来源
Autoprefixer 本身不内置任何浏览器支持规则，它只读取项目中有效的 browserslist 配置。这个配置必须显式存在且被正确识别，否则它会退回到非常宽松的默认值（比如只兼容现代 Chrome），导致旧版 Safari 或 Edge 缺失关键前缀。
- 优先写在
package.json顶层字段，而不是.browserslistrc或postcss.config.js里的overrideBrowserslist—— 后两者在 Webpack/Vite 等工具中常被忽略 - 避免模糊表达如
last 2 versions：它可能拉入已淘汰的 Safari 12 或 Android Browser 4.4，而你实际目标用户根本不用这些 - 推荐明确声明版本，例如：
"Safari >= 14.1", "Chrome >= 90", "Firefox >= 89", "iOS >= 13" - 验证是否生效：运行
npx browserslist，看输出是否与你预期一致；再运行npx autoprefixer --info，检查display: flex或gap是否被标记为“needs prefix”
确保 PostCSS 真实参与生产构建链路
很多项目开发环境有前缀、生产环境没有，根本原因不是 Autoprefixer 配错了，而是 CSS 文件压根没流经 PostCSS 处理器。
- Vite 用户：若在
vite.config.js中写了css.postcss对象，会完全覆盖默认 PostCSS 配置，导致postcss.config.js被跳过 - Webpack 用户：必须保证
postcss-loader在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS - Vue CLI 项目：
<style></style>默认不走 PostCSS，只有<style lang="postcss"></style>或显式配置了 loader 链才生效 - 快速验证法：在
postcss.config.js第一行加require('xxx-broken')，执行npm run build—— 如果没报错，说明该文件根本没被加载
警惕 cssnano 等压缩器二次处理前缀
Webpack 的 OptimizeCSSAssetsPlugin、Vite 的 esbuild CSS 压缩、甚至某些打包器内置的 minifier，常自带一个独立的 Autoprefixer 实例，且默认用的是自己的 browserslist（通常是空或极宽松），结果就是：开发时加了前缀，生产时又被删掉。
- 典型症状：
-webkit-transform在 dev 里存在，build 后消失 - 解决方式：在 cssnano 配置中显式关闭其内置 Autoprefixer，例如
cssnano({ autoprefixer: false }) - 更稳妥做法：只让 PostCSS 流水线负责加前缀，压缩阶段不做任何语法转换（即禁用所有 CSS 重写类优化）
别指望 Autoprefixer 处理所有“需要前缀才能用”的属性
Autoprefixer 只做一件事：给标准语法补厂商前缀，作为降级 fallback。它不会把没前缀的声明“强行转成带前缀”来适配仅支持前缀的老实现。
-
backdrop-filter在 Safari 17.4 仍**只认-webkit-backdrop-filter**，只写标准版，Autoprefixer 认为“无需补”，就不会加 - 类似情况还有
dialog、scroll-behavior（部分安卓 WebView）、aspect-ratio（旧版 Safari） - 正确写法是手动写前缀版 + 标准版，例如：
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);，Autoprefixer 才会在后者的前提下补其他浏览器前缀 - 查支持情况请直接访问 caniuse.com，不要只信 Autoprefixer 的“自动”二字
最常被忽略的点是：Autoprefixer 的行为完全由数据驱动，而数据来自 caniuse-db。如果你的 browserslist 写得模棱两可，或者构建链路绕过了 PostCSS，那它连“判断要不要加”的机会都没有——这时候谈配置细节毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
