vite兼容chrome48的方法

news2024/9/22 15:42:07

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.coloradmin.cn/o/196308.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaEE】HTTP的方法、报头、状态码

✨哈喽,进来的小伙伴们,你们好耶!✨ 🛰️🛰️系列专栏:【JavaEE】 ✈️✈️本篇内容:http请求的方法、报头;状态码! 🚀🚀代码存放仓库gitee:JavaEE代码&#…

学习QCustomPlot【4】库官方examples之plots解读

文章目录一、前言二、案例解说0:Quadratic Demo【二次曲线demo】1、Simple Demo【简单demo】2、Sinc Scatter Demo【Sinc函数散点demo】3、Scatter Style Demo【散点样式demo】4、Line Style Demo【线型demo】5、Scatter Pixmap Demo【图标散点demo】6、Date Demo【…

RANSAC的实现与应用

一、前言RANSAC(Random Sample Consensus)算法并不陌生,在上一篇博客中(基于SIFT的图像Matlab拼接教程)也提到过,之前代码中也多次用过,其在直(曲)线拟合、特征匹配、过滤外点(Outlier)等领域有着重要的应用。RANSAC出…

线性代数之线性基

在谈论线性基之前,先介绍什么是基向量. 根据高中数学,一个二维直角平面坐标系中的所有向量都可以只用(0, 1)和(1, 0)合成.那么(0, 1)和(1, 0)就是基向量,所有基向量能合成的所有向量被称为基向量的张成空间. 在二维空间中,有没有其他的向量能作为基向量呢?答案是肯定的. 上图…

Oracle事務簡述

簡述本文主要介紹內容有事務的隔離級別,oracle支持的事務隔離級別,事務的提交與回滾,保存點內容事務的ACID特征介紹事務繞不過事務的ACID四個特征,這裡簡單回顧以下原子性(Atomicity)事務的執行要麼全部成功…

广义霍夫变换和模板匹配的不同

简述说到霍夫变换,做图像的知道经典霍夫变换最常用于检测规则曲线,如直线、圆、椭圆等。而广义霍夫变换是为了检出那些无法写出解析式的不规则形状,虽然在深度学习大行其道的时代,霍夫变换也还是有很多应用场景,另外广…

2023年黑马Java入门到精通教程--面向对象

推荐教程:java零基础入门到精通 面向对象编程的例子 设计类,创建对象并使用 1. 类和对象是什么? 类:是共同特征的描述(设计图);对象:是真实存在的具体实例。 2. 如何设计类? 3. 如何创建对象…

CISP-PTE-Windows2003教程

为方便后续操作,建议和kali在同一网段。 获取到靶机IP后,扫描端口,1433是sqlserver的 测出用户名admin,但是密码爆破失败 扫描目录发现配置文件 配置文件中找到数据库的用户名和密码 使用Microsoft SQL Server Studio连接&#x…

MySQL从入门到精通(第0篇):全程有动画演示,适合入门学习

B站地址 文章目录一、MySQL的系统框架1. 连接池1.1 连接模块1.2 连接池2. SQL接口、SQL解析器、SQL优化器3. 存储引擎二、MySQL数据写入原理三、MySQL存储结构1. 使用InnoDB创建表2. 详述ibd文件中的存储结构2.1 页的数据连续存储2.2 行的结构2.3 区的结构2.4 组的结构2.5 段的…

剑指 Offer 33. 二叉搜索树的后序遍历序列

题目 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true&#xff0c;否则返回 false。假设输入的数组的任意两个数字都互不相同。 思路 二叉搜索树的特点是&#xff1a;左子树的值 < 根节点 < 右子树的值后序遍历的顺序是…

【逐步剖C】第三章-数组

一、一维数组 1. 一维数组的定义与使用 &#xff08;1&#xff09;数组的简单概念&#xff1a;一组具有相同类型的元素的集合 &#xff08;2&#xff09;数组的创建&#xff1a; 格式&#xff1a;类型名数组名[数组大小] 需要注意的是&#xff1a;对多数情况而言&#xff0c;…

# Vue中的Mixin混入

Vue中的Mixin混入 将组件的公共逻辑或者配置提取出来&#xff0c;哪个组件需要用到时&#xff0c;直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度&#xff0c;也可以让后期维护起来更加容易。 1. 什么是Mixin&#xff1f; 混入 (mixin) 混入 (mixin) 将组…

数据库分类

关系型与非关系型 关系数据库 MySQL、MariaDB&#xff08;MySQL的代替品&#xff09;、 Percona Server&#xff08;MySQL的代替品&#xff09;、PostgreSQL、 Microsoft Access、Google Fusion Tables、SQLite、DB2、FileMaker、Oracle、SQL Server、INFORMIX、Sybase、dBASE…

阿里云中间件2024届校园招聘

【团队介绍】 阿里云云原生中间件团队负责分布式软件基础设施&#xff0c;为阿里云上万家企业提供如微服务引擎、服务网格、消息服务、分布式事务等分布式基础服务&#xff0c;加速企业上云的进程和创新速度。同时&#xff0c;云原生中间件团队也服务着阿里集团众多核心业务和…

智能指针(三)—— shared_ptr 循环引用问题

shared_ptr 作为智能指针&#xff0c;可以满足大多数场景&#xff0c;对于一些特殊情况&#xff0c;可能会引发循环引用问题。 目录 1、循环引用案例分析 (1) 案例介绍 (2) 原因分析 2、weak_ptr 解决循环引用 1、循环引用案例分析 (1) 案例介绍 我们通过实际案例来了解…

网络编程 1 相关基础概念 及 请求、响应类 定义

目录 一、HTTP基本概念 1、HTTP是什么 2、HTTP客户端是什么 3、HTTP消息结构 4、服务器响应信息 二、相关概念 1、网址 URL 2、IP地址 3、域名 4、域名与IP关系 5、域名解析 6、DNS 三、设计请求、响应类基本数据结构 1、请求类定义 2、响应类定义 一、HTTP基本概…

AD引脚交换

19年写过一篇AD交换引脚的文章&#xff0c;原文请查阅AD18调PIN方法及注意事项&#xff0c;该方法是手动更改焊盘的网络&#xff0c;如果是对于少量的或者零散的引脚交换还好&#xff0c;但遇到像FPGA、CPLD或者端子这种大量引脚需要调PIN的情况还是一个一个手动更改就很费时了…

java 微服务 RabbitMQ高级 消息可靠性问题 死信交换机 延迟队列 惰性队列

消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; 1.消息可靠性问题&#xff08;面试很会问&#xff09; 针对这些问题&#xff0c;RabbitMQ分别给出了解决方案&#xff1a; 生产者确认机制 mq持久化 消费者确认机制 失败重试机制 下面我们就通过案…

基于Android的办公用品管理平台的设计与实现

需求信息&#xff1a; 教师端&#xff1a; &#xff08;1&#xff09;注册登录&#xff1a;教师通过输入自己的工号和密码登录系统&#xff1b; &#xff08;2&#xff09;信息修改&#xff1a;教师可以完善个人信息&#xff08;院系、职务等&#xff09;&#xff1b; &#xf…

DMS感知方案前装赛道「排位」,2025年750万辆市场争夺

对舱内驾驶员、乘客的关怀&#xff0c;正在成为车企新一轮体验升级的关键突破口。在2023年CES展上&#xff0c;类似的产品方案也成为汽车行业的焦点。 比如&#xff0c;一家名为Myant的创新材料技术公司&#xff0c;在今年CES期间推出了一款将传感器和执行器&#xff08;与编织…