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"]

重新打包 可以了

相关推荐
烛阴8 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_125439 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx41 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷2 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题