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

WwangXue2024-11-03 8:23

背景： 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"]

重新打包可以了