chrome48不支持async await语法,但有些桌面客户端的内嵌浏览器就是chrome48,如下操作即可兼容
当前环境:2023-2-3使用npm create vite@latest创建
开始兼容操作
安装vite推荐的 @vitejs/plugin-legacy
文档官网 https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
插件 | Vite 官方中文文档
npm i @vitejs/plugin-legacy -D
polyfills数组也很重要,经过实测发现,如果引入axios,chrome48会有Object.entries is undefined的错误,新增如下代码即可
'es.object.entries',
'es.object.from-entries',
'esnext.object.iterate-entries',
完整vite.config.js配置如下
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
legacy({
targets: ['chrome 48'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
renderLegacyChunks: true,
polyfills: [
'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',
'es.object.entries',
'es.object.from-entries',
'esnext.object.iterate-entries',
],
}),
],
optimizeDeps: {
// include: ['aa/a.js'],
},
base: './',
build: {
minify: false,
target: 'es2015',
},
})
polyfills值参考地址
UNPKG - core-jsThe CDN for core-jshttps://unpkg.com/browse/core-js@3.27.2/
UNPKG - core-jsThe CDN for core-jshttps://unpkg.com/browse/core-js@3.27.2/modules/
最后如果npm run build打包时出现如下错误
terser has become an optional dependency
那么需要安装一次terser即可解决问题
npm i terser --legacy-peer-deps