autoprefixer 不在 html 中配置，也不处理 或 ——它是构建阶段的 postcss 插件，仅作用于经 vite、webpack 等工具编译的源 css 文件；直接 引入的 css 若未走构建流程，则完全绕过 autoprefixer。
Autoprefixer 不在 HTML 中配置，也不处理 HTML 里的 <link> 或 <style></style> —— 它根本不会运行在浏览器里。你看到的“没加前缀”，90% 是 CSS 根本没被它处理过，而不是配置错了位置。
为什么直接在 HTML 里写 <link rel="stylesheet" href="style.css"> 没用
Autoprefixer 是构建阶段的 PostCSS 插件，只作用于被构建工具（如 Vite、Webpack）读取→解析→转换→输出的源 CSS 文件。HTML 是最终产物，此时样式早已固化。
- 用 VS Code Live Server 或
file://协议打开 HTML：零构建过程，autoprefixer完全不参与 - 用
http-server或 nginx 托管静态文件：只是发文件，不执行 PostCSS - 在 DevTools 里手动改
display: flex：这是运行时覆盖，和 Autoprefixer 无关 - 你在
index.html里<link>引入的style.css，只要没走构建流程，就永远不会被加前缀
Vite 项目中让 Autoprefixer 生效的最小必要条件
Vite 默认集成 Autoprefixer，但极易因配置缺失而“静默失效”。必须同时满足以下三点：
- 项目已安装
autoprefixer：npm install --save-dev autoprefixer -
package.json中有明确的browserslist字段（不能只靠默认）："browserslist": ["> 1%", "last 2 versions", "not dead"]
- CSS 文件需通过 Vite 的标准路径引入（例如
import './style.css'或放在src/下被index.html间接引用），而非直接<link href="/style.css">
漏掉任一条件，Vite 就 fallback 到极宽泛的目标（比如所有现代浏览器都支持 flex），结果就是“写了 display: flex 却没生成 -ms-flexbox”。
Webpack 项目中常见 loader 顺序错误
Webpack 必须确保 postcss-loader 在 css-loader 之后、style-loader 之前。顺序错一个，Autoprefixer 就彻底失效：
- ❌ 错误顺序：
style-loader → css-loader → postcss-loader→ CSS 已注入 DOM，来不及处理 - ✅ 正确顺序：
style-loader → postcss-loader → css-loader（不对，应是css-loader → postcss-loader → style-loader） - 更稳妥写法（Webpack 5+）：
{ test: /\.css$/, use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [require('autoprefixer')] } } }] }
注意：postcss-loader 的 plugins 必须显式传 require('autoprefixer')，不能只靠 postcss.config.js —— Webpack 有时会忽略它。
验证是否真生效，别只看源码
别在编辑器里翻 style.css 源文件找前缀，那只是输入；要看最终打包/开发服务器输出的实际 CSS 字节流：
- 在浏览器开发者工具的 Elements 面板中，找到对应元素，展开该样式规则，看是否有灰色小箭头（表示 vendor-prefixed 属性）
- 临时加一条高概率触发前缀的规则，例如：
.test { user-select: none; }，然后搜索生成的dist/*.css或 dev server 响应体中是否含-webkit-user-select - 运行
npx autoprefixer --info，确认当前browserslist实际匹配到哪些浏览器（比如是否真包含 IE 10 或 Android 4.4）
最常被忽略的一点：Autoprefixer 是否运行，和你写的 CSS 语法无关，只取决于它有没有真正“见到”那行代码 —— 而这完全由构建工具链的文件路径、loader 配置、browserslist 覆盖范围共同决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
