仅设 build.target 不足以兼容低版本浏览器，因其只转译语法不解决模块加载问题；必须启用 @vitejs/plugin-legacy 生成双包、智能分流并注入 polyfill。
只设 build.target 不足以让 TypeScript 项目在低版本浏览器中正常运行，尤其面对 IE11、Android 4.4 或 iOS 9 这类不支持 ESM 的环境时，容易直接白屏。关键不在语法是否转译，而在于脚本能否被加载执行。
明确 target 的作用与局限
build.target（如 'es2015' 或 'es5'）仅控制 TypeScript 和 JavaScript 语法的降级粒度，由 esbuild 执行：
- 将箭头函数、解构、模板字符串等转为兼容写法
- 但
import.meta、dynamic import()、type="module"标签仍保留 —— 它们不属于任何 ECMAScript 语言标准，esbuild 不处理 - IE 或旧 Safari 会直接忽略
<script type="module"></script>，导致 JS 完全不执行，页面空白
必须启用 @vitejs/plugin-legacy
这是 Vite 官方推荐且经过生产验证的兼容方案，它不止做语法转换，还解决模块加载和运行时 API 缺失问题：
- 生成两套产物：现代 ESM 包（供 Chrome/Firefox/Safari 新版） + 传统 IIFE 包（供旧浏览器）
- 自动注入
<script type="module"></script>和<script nomodule></script>，实现浏览器智能分流 - 内置基础 polyfill（Promise、Array.from、Object.assign 等），并支持扩展（如
regenerator-runtime用于 async/await） - 对
import.meta.env、动态导入等做静态替换或运行时 fallback
TypeScript 项目配置要点
确保 TS 编译与构建目标协同，避免类型检查与运行时行为错位：
- 在
tsconfig.json中设置"target": "ES2015"（与 Vitebuild.target对齐），禁用"useDefineForClassFields": true（IE11 不兼容） - Vite 配置中启用插件，并指定真实覆盖的浏览器范围，例如：
targets: ['chrome >= 49', 'firefox >= 45', 'safari >= 10', 'edge >= 14'] - 若需支持 IE11，需额外添加
additionalLegacyPolyfills: ['core-js/stable', 'regenerator-runtime/runtime']，并确认 Vue 项目已降级使用@vue/compat模式
检查运行时依赖兼容性
构建配置只是第一步，还需验证第三方库是否适配：
- 避免直接使用
Proxy、WeakMap、fetch等原生 API —— 即使有 polyfill，部分库内部仍可能绕过 - 检查 UI 组件库（如 Element Plus、Ant Design Vue）是否提供 legacy 构建版本或兼容模式
- 确保所有
import路径在降级后仍可解析，特别是动态导入路径（import('./xxx')）会被插件重写，需保持结构清晰
