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"]
重新打包 可以了