Autoprefixer在Vite 5+中默认启用，无需手动配置css.postcss，否则会覆盖默认设置导致失效；关键在于安装autoprefixer、精准配置browserslist（如"iOS >= 16.4"）、并验证postcss.config.js是否被正确加载。
在 Vite 中，css.postcss 配置不是“引入 Autoprefixer”的推荐方式，反而容易导致默认行为被覆盖而失效。Vite 5+ 默认已集成 PostCSS 和 Autoprefixer，真正要做的不是手动写 css.postcss，而是确保它不被错误覆盖、browserslist 精准有效、且 CSS 文件真实走通处理链路。
别乱动 css.postcss，它默认就生效
Vite 5+ 启动时会自动查找并加载 postcss.config.js 或 .postcssrc；只要项目里装了 autoprefixer，它就会根据 browserslist 自动运行。如果你在 vite.config.ts 里写了：
css: { postcss: { plugins: [...] } }
→ 这会**完全替换** Vite 的默认 PostCSS 配置，Autoprefixer 就没了。除非你明确需要自定义插件链（比如加 postcss-nested），否则直接删掉 css.postcss 字段更安全。
立即学习“前端免费学习笔记（深入）”；
正确启用 Autoprefixer 的三步关键动作
-
装依赖：运行
npm install -D autoprefixer（postcss不用单独装，Vite 已内置） -
配 browserslist：在
package.json里写明真实支持的环境，例如："browserslist": ["iOS >= 16.4", "Safari >= 16.4", "Chrome >= 95", "Android >= 12"]
别用"last 2 versions"，它会拉进大量不相关的高版本浏览器，漏掉你线上真正在跑的旧 WebView -
验证是否真运行：在
postcss.config.js里加一行require('xxx-missing')，重启 dev server —— 如果没报错，说明这个文件根本没被读取，得检查文件位置（必须在项目根目录）或是否被vite.config.ts里的css.postcss覆盖了
Vue / React 单文件组件要注意
<style></style> 块默认走 Vite 内置的 CSS 处理流程，无需改 lang；但如果你用了 <style lang="scss"></style>，就得确认是否装了 postcss-scss 并在 postcss.config.js 中声明支持（Vite 默认只对 .css 和 .pcss 开箱即用）。
React 的 .module.css 同理，默认支持；但 .scss 或 .less 文件需额外配 loader，否则 Autoprefixer 不介入。
补不补前缀，全看 browserslist 匹配结果
运行 npx browserslist，看输出里有没有 iOS 16.4、Android 12 WebView 这类你真实要兼容的环境。如果没出现，backdrop-filter、vh、sticky 就不会加 -webkit-；如果出现了 IE11，display: flex 就会多出一堆 -ms-——哪怕你压根不测试 IE。
