Autoprefixer不生效的根本原因是PostCSS未正确加载插件、browserslist配置不当或下游工具（如cssnano）误删前缀；需确保postcss.config.js正确导出插件、browserslist明确兼容目标、禁用cssnano内置autoprefixer并清理构建缓存。
Autoprefixer 不生效，不是插件“坏了”，而是它根本没被调用、或被调用时目标浏览器范围为空——最常见原因就三个：PostCSS 配置未加载、browserslist 没覆盖老浏览器、构建工具重复/覆盖处理。
postcss.config.js 是否真正被读取并执行
Webpack 5+ 的 css-loader 默认启用 PostCSS，若你又额外配了 postcss-loader，配置极可能被忽略或执行两次。VSCode 插件（如 mrmlnc.vscode-autoprefixer）则完全依赖本地 autoprefixer CLI，不装包就报 Command 'Autoprefixer' not found。
- 删掉所有非官方维护的 Autoprefixer 相关 VSCode 插件，只留
mrmlnc.vscode-autoprefixer - 项目根目录运行
npm install -D postcss autoprefixer（必须本地安装，全局无效） -
postcss.config.js内容至少为：module.exports = { plugins: [require('autoprefixer')] }; - 在终端执行
npx postcss input.css -o output.css -u autoprefixer，能成功输出即说明配置通路正常
browserslist 配置是否实际覆盖目标浏览器
Autoprefixer 补什么前缀，只看 browserslist 查询 Can I Use 的结果。写 "last 1 chrome version" 就不会加任何旧前缀；不写 IE 或 Safari 旧版本，display: flex 就不会出 -ms-flexbox。
- 在
package.json中明确声明："browserslist": ["> 1%", "not dead", "IE 11", "Safari >= 12"]
- 执行
npx browserslist，确认输出里真有你要兼容的浏览器（比如safari 12.1、ie 11） - 对 Flex 布局需 IE 11 兼容，必须传
flexbox: 'no-2009'选项：require('autoprefixer')({ flexbox: 'no-2009' }) - Grid 前缀默认关闭，要支持 IE 10/11 才加
grid: true，但注意它只补-ms-grid-column这类旧属性，不转换现代语法
cssnano 等压缩工具是否误删前缀
开发环境正常、生产构建后前缀消失？大概率是 cssnano 在压缩阶段启用了内置 autoprefixer，且它用的是自己的 browserslist 配置，和你的不一致，甚至直接把“冗余”前缀删了。
- 检查
cssnano配置，禁用其内置 autoprefixer：{ preset: ['default', { autoprefixer: false }] } - 确保
postcss.config.js中autoprefixer插件排在cssnano之前（PostCSS 插件顺序影响执行时机） - 构建后清空缓存再试，尤其 Webpack 的
.cache目录或 Vite 的node_modules/.vite
最容易被忽略的一点：Autoprefixer 不处理运行时粘贴进 DevTools 的 CSS，也不处理 .vue 单文件组件里的 块（除非你配了 vue-style-loader + postcss-loader）。它只工作在构建流程或 CLI 显式调用中——写完 display: flex 后直接 F5 刷新 HTML 是看不到效果的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
