环境: - 浏览器:Chrome56 - Vue:^3.5.15 - Vite:6.3.5 解决方案: `@vitejs/plugin-legacy` ,该包是Vite提供的一个插件,为打包后的文件提供传统浏览器兼容性支持。官网:https://github.com/vitejs/vite/tree/main/packages/plugin-legacy `terser`,主要用于压缩代码,还有代码混淆、源码映射等功能。 ```bash pnpm i @vitejs/plugin-legacy terser -D ``` 安装上述依赖后,在 `vite.config.ts/js` 中添加以下内容: ```ts import legacy from '@vitejs/plugin-legacy' // 在插件处添加一下功能 plugins: [ legacy({ // 目标浏览器环境,'defaults' 是浏览器列表默认设置,支持 Chrome 56 及以上 targets: ['defaults', 'Chrome >= 56'], // 额外引入的兼容性 polyfill,这里加入了对 generator 函数的支持 additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 是否生成兼容旧浏览器的代码块(chunk) renderLegacyChunks: true, // 需要引入的具体 polyfill 列表,确保目标环境缺失的 API 得到支持 polyfills: [ 'es.symbol', // Symbol 支持 'es.array.filter', // Array.prototype.filter 支持 'es.promise', // Promise 支持 'es.promise.finally', // Promise.prototype.finally 支持 'es.object.assign', // Object.assign 支持 'es.map', // Map 支持 'es.set', // Set 支持 'es.array.for-each', // Array.prototype.forEach 支持 'es.object.define-properties', // Object.defineProperties 支持 'es.object.define-property', // Object.defineProperty 支持 'es.object.get-own-property-descriptor', // Object.getOwnPropertyDescriptor 支持 'es.object.get-own-property-descriptors', // Object.getOwnPropertyDescriptors 支持 'es.object.keys', // Object.keys 支持 'es.object.to-string', // Object.prototype.toString 支持 'web.dom-collections.for-each', // DOM 集合的 forEach 支持 'esnext.global-this', // 全局变量 globalThis 支持 'esnext.string.match-all', // String.prototype.matchAll 支持 'es.array.iterator', // 数组迭代器支持 'es.string.includes', // String.prototype.includes 支持 'es.string.starts-with', // String.prototype.startsWith 支持 'es.object.values', // Object.values 支持 ], }), ] ``` `targets` 可以参考:[Browserslist官网](https://github.com/browserslist/browserslist) 查询 **注意该方案只在打包后生效。**