Vite默认构建支持Chrome≥87、Firefox≥78、Safari≥14、Edge≥88等原生ESM浏览器，仅转译语法不注入polyfill；需兼容旧版时须配置build.target或使用@vitejs/plugin-legacy插件。
直接用 Vite 默认配置就能构建出支持现代浏览器的应用，无需额外操作。它默认目标是 Chrome ≥87、Firefox ≥78、Safari ≥14、Edge ≥88 —— 这些浏览器都原生支持 ESM、import.meta 和动态 import()。
确认默认兼容范围是否满足需求
Vite 不做降级处理，只转译语法（如可选链、nullish 合并），不注入 polyfill。如果你的用户基本都在近 3 年主流版本浏览器中，这个范围完全够用。
- 检查项目实际用户 UA 数据，重点关注 IE、旧版 Safari 或 Android WebView 占比
- 若需支持更低版本（如 Safari 12 或 Chrome 65），必须显式配置
build.target - 例如支持到 ES2015：在
vite.config.js中加入build: { target: 'es2015' }
按需启用传统浏览器兼容（仅当必要时）
如果确实要兼容不支持 ESM 的老浏览器（如 IE11、Android 4.4 WebView），用官方插件 @vitejs/plugin-legacy：
- 安装：
npm install -D @vitejs/plugin-legacy - 在配置中引入并启用：
legacy({ targets: ['defaults', 'not IE 11'] }) - 构建后会生成两套产物：
dist/下的现代版（ESM）和dist/legacy/下的传统版（UMD + polyfill） - HTML 中自动注入
<script type="module">和<script nomodule>双入口
静态资源与基础路径适配现代部署场景
现代应用常部署在子路径或 CDN 上，Vite 提供简洁方式确保资源加载正确：
立即学习“Java免费学习笔记（深入）”；
- 设置
base: '/my-app/'，所有打包资源路径自动加前缀 - JS 中动态拼接 URL 时，用
import.meta.env.BASE_URL（构建时静态替换，不可用方括号访问） - 避免硬编码
/static/或./，尤其在 PWA 或微前端场景下更关键
保持构建输出干净且可缓存
现代部署强调长期缓存与快速首屏，Vite 默认已优化，但可再强化：
- 启用
build.rollupOptions.output.manualChunks拆分 vendor，让 React/Vue 等库单独成 chunk，提升复用率 - 保留
sourcemap: false（生产环境默认关闭），减小包体积 - 避免在代码中
eval或new Function，否则 Terser 压缩可能失效
