仅设build.target无法兼容旧浏览器，必须用@vitejs/plugin-legacy实现双构建+运行时垫片：生成esm/iife两套包、注入nomodule脚本、按需加载polyfill。
只配 build.target 无法让旧版浏览器真正跑起来，因为语法降级不等于能执行——IE11、Android 4.4、iOS 9 等老环境连 <script type="module"></script> 都不认识，直接跳过脚本，页面就白了。真正起作用的是双构建 + 运行时垫片组合方案。
必须用 @vitejs/plugin-legacy 而不是只调 target
这个插件会自动做三件事：
- 生成两套产物：现代 ESM 包（给 Chrome/Firefox/Safari 新版）和传统 IIFE 包（给老浏览器）
- 在 HTML 中注入
<script nomodule></script>，让不支持模块的浏览器自动加载降级版 - 按需注入 polyfill，比如 Promise、Array.from、Object.assign、Map/Set 等，并支持扩展
基础配置示例（vite.config.ts）
安装插件：
npm install @vitejs/plugin-legacy -D
配置插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ['chrome >= 49', 'firefox >= 45', 'safari >= 10', 'edge >= 14'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
})
注意：targets 写的是实际要支持的浏览器范围，不是版本号列表；regenerator-runtime 是 async/await 转译后必需的运行时支撑，漏掉会导致 Promise 链中断。
按需补充 polyfill 防止 API 报错
插件默认只加基础 polyfill，如果代码里用了较新的 API，得手动声明：
-
Object.hasOwn()→ 加'es.object.has-own' -
Array.prototype.at()→ 加'es.array.at' -
String.prototype.replaceAll()→ 加'es.string.replace-all' - 需要 Symbol 支持（如某些 Vue 响应式逻辑）→ 加
'es.symbol'
全部可选 polyfill 列表见 core-js 文档，推荐从项目实际报错出发，逐步添加，避免冗余。
额外检查点：别让 runtime 拖后腿
即使构建配置正确，以下情况仍会导致白屏或报错：
- 第三方库自带 ES6+ 语法且未被插件处理（比如某些未打包的 UMD 库），需确认其兼容性或手动转译
- 代码中直接调用了 IE11 不支持的原生 API，如
fetch、URLSearchParams、ResizeObserver，这些需单独引入对应 polyfill - Vue 3 默认不支持 IE11，若强制兼容，需关闭 Composition API 中依赖 Proxy 的功能（如
reactive），改用ref+shallowRef组合
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
