postcss需显式配置autoprefixer插件且css文件必须经postcss-loader处理才能为ie10/11生成-ms-flexbox；失效主因包括browserslist未明确声明ie版本、未启用flexbox:'2009'模式、文件未被构建工具处理或配置遗漏插件。
PostCSS 本身不自动加前缀，必须显式配置 autoprefixer 插件，且所有 CSS 文件必须经过 postcss-loader（或等效 PostCSS 处理链）才能生效。
为什么写了 display: flex 却没生成 -ms-flexbox？
autoprefixer 对 IE 10/11 的 flex 支持是条件触发的：它只在目标浏览器明确需要时才加 -ms- 前缀。常见失效原因包括：
-
browserslist里没写"IE >= 11"或类似明确声明，只写"> 1%"会导致 IE 被忽略 - 用了 autoprefixer v10+ 默认配置，但没设
flexbox: '2009'—— 新版默认只输出标准语法，老式 IE 需要手动启用旧 flex 模式 - CSS 文件放在
public/目录下，Vite/Webpack 不会对其运行 PostCSS，@import进来的也一样被跳过 - Vue 单文件组件中
<style></style>没走postcss-loader，比如vue.config.js里误设了css.requireModuleExtension: false
postcss.config.js 必须包含 autoprefixer，不能只装不配
只运行 npm install autoprefixer -D 是无效的。配置文件必须显式引入并挂载插件：
module.exports = {
plugins: [
require('autoprefixer') // 必须这一行，不是可选
]
}
如果要用自定义选项（比如兼容 IE），得写成：
module.exports = {
plugins: [
require('autoprefixer')({
flexbox: '2009',
overrideBrowserslist: ['IE >= 11', 'Chrome >= 45']
})
]
}
注意：overrideBrowserslist 是旧字段名，v10+ 推荐统一用 browserslist 字段（写在 package.json 或 .browserslistrc 中），避免 loader 配置里重复声明。
Webpack 和 Vite 的 loader 链顺序和写法差异
loader 执行顺序是从右到左，postcss-loader 必须在 css-loader 之后、style-loader 之前：
- Webpack 推荐写法（显式传参，可控性强）：
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [require('autoprefixer')] } } }] - Vite 无需改
vite.config.js，只要存在postcss.config.js就自动启用；但若用@import引入.less或.scss，必须先装对应预处理器，否则该行被静默忽略 - Vue CLI 项目默认已集成，但如果你覆盖了
css.loaderOptions.postcss，要确认没把autoprefixer覆盖掉
最容易被忽略的是：autoprefixer 不处理你手动写的前缀。比如你写了 display: -webkit-flex，它会直接删掉——它只补缺，不修旧。所以清理历史代码、坚持只写标准语法，才是长期省事的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
