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 分钟前
HTML5图片裁剪工具实现详解
前端·html·html5
念九_ysl11 分钟前
基数排序算法解析与TypeScript实现
前端·算法·typescript·排序算法
海石11 分钟前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
uhakadotcom22 分钟前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
uhakadotcom34 分钟前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
机器视觉知识推荐、就业指导1 小时前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC491 小时前
golang接口-interface
java·前端·golang
慕斯策划一场流浪1 小时前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端