仅靠build.target语法降级无法解决低版本浏览器白屏，因其不处理ESM模块加载机制；必须配合@vitejs/plugin-legacy生成双版本产物并注入nomodule回退逻辑。
在 Vite 构建中做代码语法降级，核心是控制最终 JS 产物的语言标准级别，但要注意：仅靠语法降级不能解决低版本浏览器白屏问题，它只是兼容性工作的第一步。
用 build.target 控制语法转译目标
Vite 通过 build.target 告诉底层 esbuild 把源码转译成哪个 ECMAScript 版本。它不改变模块系统，只处理语法结构：
- 设为
"es2015"：箭头函数、const/let、模板字符串、解构等会被降级（如转为 function、var、字符串拼接） - 设为
"chrome64"或"safari12"：保留 async/await，但移除可选链、空值合并等较新特性 - 注意：esbuild 不支持 es5 目标，所以 IE11 兼容不能只靠 target
为什么 target 不够用？
即使语法完全降级，现代构建仍默认输出 <script type="module"> 标签。IE、Android 4.4、iOS 9 等老浏览器根本不识别这个属性，直接跳过脚本加载 —— 页面就空了。
也就是说：target 只管 JS 写法，不管 HTML 怎么加载 JS。它不处理 import.meta、动态 import()、ESM 模块机制本身，这些在 es2015 下依然会报错或被忽略。
立即学习“Java免费学习笔记（深入）”；
真正要兼容老浏览器，必须加 @vite/plugin-legacy
这个插件才是完整解决方案：
- 基于 Babel，按你配置的 browserslist（如
"ie >= 11"）做深度语法+API 降级 - 自动注入 polyfill（Promise、Array.from、Symbol 等）
- 生成两套产物：
index.js（现代版，type="module"）和index-legacy.js（传统版，普通 script） - 在 HTML 中同时写两个 script 标签，用
nomodule属性让老浏览器加载降级版
简单配置示例
安装插件：
pnpm add -D @vite/plugin-legacy在 vite.config.ts 中启用：
import legacy from '@vite/plugin-legacy'
添加插件配置：
export default defineConfig({plugins: [
legacy({
targets: ['chrome 58', 'edge 15', 'firefox 52', 'safari 10', 'ie 11']
})
]
})
插件会自动把 build.target 调整为匹配最老目标的语法级别，并完成其余所有兼容性工作。
