什么是 Polyfill
Polyfill 是一种代码，用于在现代浏览器中实现旧版本浏览器不支持的功能。它”填充”了浏览器之间的功能差异，确保代码在不同环境中都能正常运行。
Vue3 中的 Polyfill 需求
Vue3 基于现代 JavaScript 特性构建，在某些旧版浏览器中可能需要 polyfill 支持：
Vue3 依赖的现代特性
ES2015+ 语法：箭头函数、解构赋值、模板字符串
Proxy API：Vue3 的响应式系统核心
Promise：异步操作处理
Array 方法：Array.prototype.includes、Array.prototype.find 等
Object 方法：Object.assign、Object.entries 等
浏览器兼容性要求
// Vue3 官方支持的浏览器版本
{
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11" // Vue3 不支持 IE11
]
}
Vite 中的 Polyfill 配置
使用 @vitejs/plugin-legacy
npm install @vitejs/plugin-legacy -D
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ["defaults", "not IE 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
renderLegacyChunks: true,
polyfills: [
"es.symbol",
"es.promise",
"es.promise.finally",
"es/map",
"es/set",
"es.array.filter",
"es.array.for-each",
"es.array.flat-map",
"es.object.define-properties",
"es.object.define-property",
"es.object.get-own-property-descriptor",
"es.object.get-own-property-descriptors",
"es.object.keys",
"es.object.to-string",
"web.dom-collections.for-each",
"esnext.global-this",
"esnext.string.match-all",
],
}),
],
});
自定义 Polyfill 配置
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
define: {
// 全局常量定义
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
},
build: {
target: "es2015", // 设置构建目标
rollupO