仅设 build.target 无法解决白屏，因其只降级语法不处理模块加载机制；需配合 @vitejs/plugin-legacy 生成双版本产物并注入 nomodule 回退逻辑。
直接设 build.target 并不能完全解决白屏问题，尤其当目标浏览器不支持 ESM 模块加载时。它只负责语法降级（如箭头函数、解构、async/await 等），但不会处理 import.meta、动态导入、type="module" 标签等现代模块机制 —— 这些才是低版本浏览器白屏的主因。
build.target 的作用与局限
它告诉 Vite（背后是 esbuild）把代码转译到哪个语言标准级别，比如 es2015 或 chrome58。Vite 会据此移除或替换不兼容的语法结构：
- 将
const/let转为var（若目标为es5，但注意 esbuild 不支持es5目标） - 将箭头函数转为普通函数表达式
- 将模板字符串、解构赋值等降级为兼容写法
- 但
import.meta、dynamic import()在es2015下仍会报错，因为它们不属于该标准
为什么只配 target 还是白屏？
关键在于：即使 JS 语法被降级了，HTML 中生成的 <script type="module"> 依然存在。IE、Android 4.4、iOS 9 等浏览器根本不识别这个标签，直接忽略整个脚本，页面空荡荡 —— 这就是典型的“白屏”。
-
build.target: 'es2015'≠ 支持type="module" - ES2015（ES6）规范不包含模块加载机制，ESM 是后来独立演进的标准
- Vite 默认输出的是 ESM 构建产物，和
target无关
真正有效的适配组合方案
必须同时解决两件事：语法可执行 + 加载方式被识别。推荐用官方插件 @vitejs/plugin-legacy，它自动完成：
- 生成两套产物：一套现代 ESM（供 Chrome/Firefox/Safari 新版使用），一套传统 IIFE（供旧浏览器用）
- 自动注入
<script nomodule>和条件加载逻辑，让旧浏览器跳过 module 脚本、加载降级版 - 内置基础 polyfill（如 Promise、Object.assign、Array.from），并支持扩展（如
regenerator-runtime） - 对动态导入、
import.meta等做运行时 fallback 或静态替换
配置示例（vite.config.ts）：
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']
})
]
})
额外注意点
仅靠构建配置还不够，还需检查运行时依赖：
- 确保项目中未直接使用 IE/旧 Safari 不支持的 API（如
Array.prototype.includes），否则需手动引入对应 polyfill - 第三方库（如 Element Plus、Axios）可能自带新语法，建议确认其兼容性或使用其 legacy 版本
- TypeScript 的
target应设为es2015或更高（es5不被 esbuild 支持），避免 TS 编译阶段就出错 - 打包后务必在目标机型上真机测试，模拟器或开发者工具的兼容模式不可靠
