vite5 打包项目兼容ie和低版本chrome

背景: vite打包后的项目 在低版本chrome无法使用

直接打包项目在69版本的chrome上无法加载 报错

解决方法:

使用vite官方推荐的插件 @vitejs/plugin-legacy

1、下载

复制代码
npm i @vitejs/plugin-legacy -D

2、vite.config.js

复制代码
import legacy from "@vitejs/plugin-legacy"

plugins: [
  legacy({
         targets: ["defaults", "ie >= 11", "chrome 69", "Chrome >= 49"], //需要兼容的目标列表,可以设置多个
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        renderLegacyChunks: true,
        polyfills: [
          "es.promise.all-settled",
          "es.object.entries",
          "es.symbol",
          "es.array.filter",
          "es.promise",
          "es.promise.finally",
          "es/map",
          "es/set",
          "es.array.for-each",
          "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"
        ],
        modernPolyfills: ["es.promise.all-settled", "es.object.entries"]
      })
]

配置好后npm run build:prod打包看下效果

报错如下

修改vite.config.js中 legacy配置项

复制代码
 polyfills: [
          "es.promise.all-settled",
          "es.object.entries",]
modernPolyfills: ["es.promise.all-settled", "es.object.entries"]

重新打包 可以了

相关推荐
!win !1 分钟前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 分钟前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜1 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript