Autoprefixer 需经 PostCSS 正确加载且 CSS 必须流经其处理链，常见问题源于构建流程断开、browserslist 配置错误或 CSS 特性本身无前缀支持。
Autoprefixer 不是装完就生效的“开关”，它必须被 PostCSS 正确加载，且你的 CSS 文件必须实际流经 PostCSS 处理链——绝大多数“没加前缀”的问题，都卡在构建流程断开这一步。
postcss.config.js 没被读取？先验证它是否真在运行
很多项目根目录下放了 postcss.config.js，但构建工具根本没加载它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 中显式写了 css.postcss，反而可能覆盖默认行为；Webpack 则完全不认这个文件，必须手动配置 postcss-loader。
- 实操建议：在
postcss.config.js里加一行require('xxx-missing-plugin')，然后启动 dev server 或 run build —— 如果不报错，说明该文件压根没被加载 - Vite 要求
postcss.config.js必须在项目根目录；Webpack 要求postcss-loader必须排在css-loader之后，且css-loader的importLoaders≥ 1，否则@import进来的 CSS 不会进 PostCSS 流程 - Vue CLI 默认集成，但只有
<style lang="postcss"></style>才走 PostCSS；普通<style></style>块需确认vue-style-loader+css-loader链路中是否含postcss-loader
browserslist 配置错误，autoprefixer 就白忙一场
autoprefixer 完全按 browserslist 输出前缀，不是靠经验或猜测。“last 2 versions” 会强制给 Safari 12 加 -webkit-，而它早已原生支持 gap；“> 1%” 可能拉进大量 IE11 用户，生成一堆 -ms- 前缀，但你的项目根本不支持 IE。
- 实操建议：优先把
browserslist写在package.json里，避免多处维护；不要用autoprefixer插件内的overrideBrowserslist参数 - 线上项目推荐显式声明，例如：
"iOS >= 13"、"Safari >= 14.1"、"Chrome >= 90"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写 CSS
CSS 写法超出 autoprefixer 支持范围，前缀自然不会加
autoprefixer 只补前缀，不转译语法。它不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
- 常见错误现象：
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求 -
place-items: center在 Safari 14.1 下不生效 → 不是前缀问题，是该属性在 Safari 中需align-items+justify-items组合才能模拟，autoprefixer不做这种语义转换 - 写了
display: flex却在 iOS 8.4 上失效 → 因为 Safari 8 需要display: -webkit-box和display: -webkit-flex，而你的browserslist没包含这个版本，autoprefixer就不会生成
真正容易被忽略的是：autoprefixer 的输出完全取决于你声明的浏览器范围和原始 CSS 的语法层级。它不猜意图，不兜底兼容，也不修复逻辑错误——它只做一件事：查表补前缀。一旦 browserslist 和构建链路对不上，或者你写的 CSS 特性本身就没进 caniuse 的前缀支持列表，那结果就是“什么都没发生”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
