vite兼容chrome48的方法

news/2025/2/23 9:05:17

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 

 

 

 


http://www.niftyadmin.cn/n/32172.html

相关文章

Python---方法(普通方法,类方法,静态方法)

专栏:python 个人主页:HaiFan. 专栏简介:Python基础已经更新完,接下来是Python面向对象的知识点。 方法前言普通方法类方法静态方法总结前言 方法是什么? 一个类,它有特征,也有动作&#xff0…

分布式(三)

三、API 网关详解 1. 网关及作用 主要功能:请求过滤 网关可以为我们提供请求转发、安全认证(身份/权限认证)、流量控制、负载均衡、降级熔断、日志、监控等功能。 2. 常见的网关系统 2.1 Netflix Zuul (1)Zuul 是…

【3】KVM虚拟化存储 | 虚拟机磁盘挂载

目录 【概念】 一、存储池管理 1.创建基于文件夹的存储池(目录) 2.定义存储池与其目录 3.创建已定义的存储池 4.激活并自动启动已定义的存储池 5.在存储池中创建虚拟机存储卷 6.存储池相关管理命令 二、生产环境存储池使用 三、磁盘格式 1.磁盘镜像文件…

西湖论剑2022部分misc

文章目录签到题喵take_the_zip_easymp3机你太美签到题喵 把文件尾的16进制复制出来,再转换字符串 私信后台即可获得flag take_the_zip_easy 明文攻击 echo -n “dasflow.pcapng” > 1.txt time ./bkcrack -C zipeasy.zip -c dasflow.zip -p 1.txt -o 30 -x 0…

windows下通过uiAutomation技术获取ui元素

最近接个需求,要求获取 windows 下 ui 元素,经一番搜索后了解到可通过工具 UISpy.exe 或 inspect.exe 来进行查看。以软件 davinci resolve 为例: 右侧即 UISpy 工具,根据内容可以看出已捕获到 davinci 界面的各属性及对应值。而 …

java对象的比较

上一章中关于PriorityQueue的使用要注意: 1. PriorityQueue中放置的元素必须要能够比较大小,不能插入无法比较大小的对象,否则会抛出 ClassCastException异常 2. 不能插入null对象,否则会抛出NullPointerException 3. 没有容量限制…

看这个就够了——ubuntu系统中的cuda cudnn cudatookit及pytorch使用

一.基本概念1.1 nvidia独立显卡独立显卡是指以独立板卡形式存在,可在具备显卡接口的主板上自由插拔的显卡。独立显卡具备单独的显存,不占用系统内存,而且技术上领先于集成显卡,能够提供更好的显示效果和运行性能。显卡作为电脑主机…

C++引用(特性+使用场景+常引用)

文章目录1. 概念2. 关于别名的理解3. 引用的特性1.引用必须在定义时初始化2.一个变量可以有多个别名3.引用一旦引用一个实体,再不能引用其他实体4.使用场景1. 引用做参数2. 引用做返回值1. 传值返回是否为n直接返回临时变量作为返回值2. 传引用返回编译器傻瓜式判断…