postcss 必须真正参与生产构建流程，否则 autoprefixer 不生效；需确保 css 文件流经 postcss 处理链、browserslist 配置准确、压缩器不覆盖前缀、grid/flexbox 兼容策略显式声明。
确认 PostCSS 真正参与了生产构建流程
Autoprefixer 不是“装了就生效”的工具，它必须被 PostCSS 加载，且 CSS 文件必须实际流经 PostCSS 处理链。很多生产环境没加前缀，根本原因是 CSS 在打包时绕过了 PostCSS。
常见断点：
- Vite 5+ 默认启用 PostCSS，但若你在
vite.config.js中显式配置了css.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>或配置了vue-style-loader → css-loader → postcss-loader链路才生效
实操建议：在 postcss.config.js 里加一行 require('xxx-broken')，然后运行生产构建（如 npm run build）——如果没报错，说明该文件根本没被读取。
用 package.json 的 browserslist 精确控制目标浏览器
browserslist 是 Autoprefixer 的唯一权威来源，写错一条规则，前缀就加得不对。别依赖 autoprefixer.yml 或插件内 overrideBrowserslist 参数，它们在多数构建工具中不生效。
推荐写法（直接放在 package.json 顶层）：
"browserslist": [
"iOS >= 13",
"Safari >= 14.1",
"Chrome >= 90",
"Firefox >= 89",
"Edge >= 91"
]
这样比模糊语法更可控，也避免了 last 2 versions 拉入已淘汰的 Safari 12、或 > 1% 意外包含 IE11。
验证是否生效：
- 运行
npx browserslist，看输出是否符合预期 - 运行
npx autoprefixer --info，检查display: flex、gap、place-items等关键属性是否被标记为“需要前缀”
警惕构建工具自带的 CSS 压缩器覆盖 Autoprefixer
生产环境常引入 cssnano 或类似压缩器（比如 Webpack 的 OptimizeCSSAssetsPlugin、Vite 的 esbuild CSS 压缩），它们内部可能自带一个独立的 Autoprefixer 实例，且默认配置与你项目的 browserslist 不一致。
典型现象：开发环境有 -webkit- 前缀，生产环境反而没了。
解决方法：
- 禁用压缩器内置的 Autoprefixer：例如在
cssnano配置中设autoprefixer: false - 或显式传入你的
browserslist：如cssnano({ autoprefixer: { overrideBrowserslist: [...] } }) - 更稳妥的做法：只让 PostCSS 流水线处理前缀，压缩阶段不做任何 CSS 转换
Grid 和 Flexbox 的兼容性策略必须显式声明
Autoprefixer 对现代布局特性的处理不是开箱即用的。尤其在需要支持 IE10–11 时，grid 和 flexbox 行为差异极大，不配置等于白配。
示例配置（postcss.config.js）：
module.exports = {
plugins: [
require('autoprefixer')({
grid: 'autoplace',
flexbox: 'no-2009'
})
]
}
说明：
-
grid: 'autoplace'启用 Grid 自动放置语法的 IE 兼容降级（如将grid-template-areas转为-ms-grid-row等） -
flexbox: 'no-2009'跳过已废弃的 2009 版 Flexbox 规范（display: -webkit-box），只生成现代前缀（-ms-flexbox、flex），避免 IE10 下样式错乱
注意：grid: true 已被弃用，必须用字符串值；flexbox: false 会完全禁用 Flexbox 前缀，不是“不加旧版”，这点极易踩坑。
最常被忽略的点是：browserslist 写得再准，如果构建链路没走 PostCSS，或者压缩器偷偷重跑了一次 Autoprefixer，前缀就会消失。验证必须落到具体构建产物上，别只信配置文件存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
