autoprefixer在vite中需显式配置才生效，常见失效原因包括css.postcss覆盖默认配置、browserslist未正确声明目标环境、css未通过import或sfc style块进入postcss流程，且它仅补前缀不降级语法。
Autoprefixer 在 Vite 里不是“装完就生效”，它是否工作，取决于你有没有真正让它参与 CSS 处理链——绝大多数失效问题，根源在配置覆盖、路径错位或流程绕过。
确认 Vite 是否真在调用 Autoprefixer
Vite 5+ 默认启用 PostCSS，但只要你显式写了 css.postcss 字段（哪怕只配了个空对象），就会覆盖默认行为，导致 autoprefixer 彻底不运行。
- 检查
vite.config.ts中是否包含css: { postcss: { ... } }—— 如果有，必须手动把autoprefixer()加进plugins数组里 - 在
postcss.config.js里写require('autoprefixer')是无效的：Vite 5+ 默认不读这个文件，除非你没碰css.postcss - 快速验证法：在
vite.config.ts的css.postcss.plugins里加一行require('xxx-missing-plugin')，启动 dev server —— 若不报错，说明整个plugins数组根本没被加载
正确声明 browserslist 目标环境
Autoprefixer 只按 browserslist 配置加前缀，不是靠“经验”判断。写 "last 2 versions" 不会为 iOS Safari 10 补 -webkit-，因为该配置实际匹配的是 Safari 17+。
- 优先把配置写在
package.json的browserslist字段里，避免.browserslistrc和 CI 环境不一致 - 国内真实场景建议显式写：
"iOS >= 16.4"、"Safari >= 16.5"、"Chrome >= 90"，而非模糊语法 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info确认display: flex或::placeholder是否列在处理列表中
注意 CSS 文件是否真进了 PostCSS 流程
Vite 对不同引入方式的 CSS 处理逻辑不同：<link rel="stylesheet"> 引入的 CSS 完全绕过构建流程，Autoprefixer 一概不碰。
- 只有 JS 中
import './style.css'或 SFC 中<style></style>（非lang="scss"等）才会走默认 PostCSS 链路 - 若用了
<style lang="scss"></style>，需确保sass编译后输出的 CSS 还能进入 PostCSS —— Vite 默认支持，但自定义css.postcss后可能中断 - Vue 项目中，
<style lang="postcss"></style>是显式触发，但普通<style></style>块依赖默认链路，一旦css.postcss覆盖了默认配置，就可能丢失
Flexbox / Grid 等特性前缀生成有条件
写了 display: flex 却没出 -ms-flexbox？不是插件坏了，是条件没满足。
- 要生成 IE11 的
-ms-前缀，browserslist必须明确含"IE 11"或"ie >= 11"；"last 2 versions"默认不含 IE - Autoprefixer ≥ v10 对老版 Flexbox 规范需显式启用：
autoprefixer({ flexbox: '2009' }) - CSS 中已存在手动前缀（如
display: -webkit-flex）会直接跳过整条声明 —— Autoprefixer 不合并、不覆盖、不修正，只补标准写法的缺失前缀
最常被忽略的一点：Autoprefixer 只补前缀，不降级语法。它不会把 gap: 1rem 拆成 margin，也不会让 display: grid 在 IE11 上可用。兼容性兜底仍需人工双写或 JS 干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
