当前位置: 首页 > news >正文

vite+vue3开发低版本浏览器不支持es6语法的问题排坑笔记

重要提示:请首先完整阅读完文章内容后再操作,以免不必要的时间浪费!切记!!!在使用vite+vue3开发unapp项目时,发现低版本浏览器不兼容es6的语法,如“?.” “??” 等,为了方便使用jenkins自动化部署前端项目,我使用的是 uni-cli而非HBuilderX 创建的项目,当然使用uni-cli创建uni-app项目还有一个好处是可以使用其他软件如 vscode、Cursor 或者webstrom进行开发,这样还能方便我们使用AI工具辅助开发,提升开发效率。在我的项目中使用的vite版本是5.2.8,如果需要前端项目支持低版本的浏览器,或者需要将较新的es语法转换成更低版本,那么只需要在 vite.config.js 中添加 build.target 配置即可,vite官方文档显示build.target的值为string或者string[],可以根据自己的兼容需求进行配置。需要进行额外说明的是,对于vite5.2.8或之后的版本不需要再单独安装使用包括 @vitejs/plugin-legacy以及其他任何babel插件解决浏览器兼容问题,因为这个选项已经被build.target替代了,如果你强行在plugins中使用 legacy(),那么在执行 npm run build 打包时也会有相关配置已被替换的提示。最坑的地方是,不要在开发阶段(npm run dev)到低版本浏览器上验证build.target配置是否生效,必须用npm run build 打包生成的代码来验证,因为这个配置在开发环境是不起作用的,我被整整浪费了3个小时才发现的这个问题,当然可能有我不知道的配置项来控制这个行为。
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// import legacy from '@vitejs/plugin-legacy'// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),// legacy({//     targets: [//         "> 1%, last 1 version, ie >= 11",//         "safari >= 10",//         "Android > 39",//         "Chrome >= 60",//         "Safari >= 10.1",//         "iOS >= 10.3",//         "Firefox >= 54",//         "Edge >= 15"//     ],// })],build: {sourcemap: true,target: ['chrome58','firefox67','safari11','edge79',],},
})

相关文章:

vite+vue3开发低版本浏览器不支持es6语法的问题排坑笔记

重要提示:请首先完整阅读完文章内容后再操作,以免不必要的时间浪费!切记!!!在使用vitevue3开发unapp项目时,发现低版本浏览器不兼容es6的语法,如“?.” “??” 等,为了…...

C语言中printf()函数,格式输出符

在 C 语言中,printf() 函数的格式输出符(格式说明符)用于控制输出的格式和数据类型。以下是常见的格式说明符及其用法: 基本格式符 打印各种类型的值 格式输出符数据类型说明%dint输出有符号十进制整数%uunsigned int输出无符号…...

AI 编程工具—Cursor 进阶篇 数据分析

AI 编程工具—Cursor 进阶篇 数据分析 上一节课我们使用Cursor 生成了北京房产的销售数据,这一节我们使用Cursor对这些数据进行分析,也是我们尝试使用Cursor 去帮我们做数据分析,从而进一步发挥Cursor的能力,来帮助我们完成更多的事情 案例一 房产销售数据分析 @北京202…...

青少年编程与数学 02-009 Django 5 Web 编程 20课题、测试

青少年编程与数学 02-009 Django 5 Web 编程 20课题、测试 一、软件测试二、自动化测试三、单元测试四、Django 单元测试(一)、创建测试用例(二)、运行测试(三)、常用测试功能 课题摘要: 本文全面介绍了软件…...

zookeeper watch

目录 回顾回调&观察者模式&发布订阅模式Zookeeper 客户端/ 服务端 watchgetChildren 为例最后归纳 回顾回调&观察者模式&发布订阅模式 回调的思想 类A的a()方法调用类B的b()方法类B的b()方法执行完毕主动调用类A的callback()方法 回调分为同步回调和异步回调…...

vue3.x 的shallowReactive 与 shallowRef 详细解读

在 Vue 3.x 中,shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似,但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。 1. shallowReactive 作用 shallowReactive 创建一个浅层响应式对…...

鸿蒙NEXT开发-界面渲染(条件和循环)

注意:博主有个鸿蒙专栏,里面从上到下有关于鸿蒙next的教学文档,大家感兴趣可以学习下 如果大家觉得博主文章写的好的话,可以点下关注,博主会一直更新鸿蒙next相关知识 目录 1. 渲染-条件渲染 1.1 基本介绍 1.2 使…...

python电影数据分析及可视化系统建设

博主介绍:✌程序猿徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...

在本地校验密码或弱口令 (windows)

# 0x00 背景 需求是验证服务器的弱口令,如果通过网络侧校验可能会造成账户锁定风险。在本地校验不会有锁定风险或频率限制。 # 0x01 实践 ## 1 使用 net use 命令 可以通过命令行使用 net use 命令来验证本地账户的密码。打开命令提示符(CMD&#xff0…...

pytest测试专题 - 1.3 测试用例发现规则

<< 返回目录 1 pytest测试专题 - 1.3 测试用例发现规则 执行pytest命令时&#xff0c;可以不输入参数&#xff0c;或者只输入文件名或者目录名&#xff0c;pytest会自己扫描测试用例。那pytest基于什么规则找到用例呢&#xff1f; 文件名&#xff1a;满足文件名称为tes…...

零基础学习人工智能

零基础学习人工智能是一个既充满挑战又极具潜力的过程。以下是一份详细的学习指南&#xff0c;旨在帮助零基础的学习者有效地踏入人工智能领域。 一、理解基本概念 在学习人工智能之前&#xff0c;首先要对其基本概念有一个清晰的认识。人工智能&#xff08;AI&#xff09;是…...

LeetCode热题100- 缺失的第一个正数【JavaScript讲解】

题目&#xff1a; 解题一&#xff1a; 如果不考虑时间复杂度和空间复杂度的话&#xff0c;我们最先想到的办法是先将该数组进行排序和去重&#xff0c;将最初的res结果值设置为1&#xff1b;将然后进行遍历&#xff0c;如果第一项不为1&#xff0c;则返回1&#xff0c;否则根…...

JAVA泛型介绍与举例

Java中&#xff0c;泛型用于编译阶段限制集合中元素的类型&#xff0c;或者限制类中某个属性的类型&#xff0c;编译过程中发生类型擦除&#xff0c;最终还是Object类型。 1. 集合中的泛型 集合默认可以存储任何类型的元素&#xff0c;即Object类型&#xff0c;当使用一个集合…...

【ISO 14229-1:2023 UDS诊断(会话控制0x10服务)测试用例CAPL代码全解析③】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase03 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月15日 关键词&#xff1a;UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-003测试用例 用例ID测试场景验证要点参考条款预期…...

Vivado生成edif网表及其使用

介绍如何在Vivado中将模块设为顶层&#xff0c;并生成相应的网表文件&#xff08;Verilog文件和edif文件&#xff09;&#xff0c;该过程适用于需要将一个模块作为顶层设计进行综合&#xff0c;并生成用于其他工程中的网表文件的情况。 例如要将fpga_top模块制作成网表给其它工…...

Win10环境借助DockerDesktop部署大数据时序数据库Apache Druid

Win10环境借助DockerDesktop部署最新版大数据时序数据库Apache Druid32.0.0 前言 大数据分析中&#xff0c;有一种常见的场景&#xff0c;那就是时序数据&#xff0c;简言之&#xff0c;数据一旦产生绝对不会修改&#xff0c;随着时间流逝&#xff0c;每个时间点都会有个新的…...

mac 意外退出移动硬盘后再次插入移动硬盘不显示怎么办

第一步&#xff1a;sudo ps aux | grep fsck 打开mac控制台输入如下指令&#xff0c;我们看到会出现两个进程&#xff0c;看进程是root的这个 sudo ps aux|grep fsck 第二步&#xff1a;杀死进程 在第一步基础上我们知道不显示u盘的进程是&#xff1a;62319&#xff0c;我们…...

力扣动态规划-32【算法学习day.126】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.完全平方数 题目链接:279. 完全…...

【算法进阶详解 第一节】树状数组

【算法进阶详解 第一节】树状数组 前言树状数组基础树状数组原理树状数组能够解决的问题 树状数组提高树状数组区间加&#xff0c;区间和操作二维树状数组 树状数组应用树状数组区间数颜色树状数组二维偏序 前言 树状数组在算法竞赛中十分常见&#xff0c;其能解决二维数点&am…...

【苍穹外卖】学习

软件开发整体介绍 作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程&#xff0c; 以及软件开发过程中涉及到的岗位角色&#xff0c;角色的分工、职责&#xff0c; 并了解软件开发中涉及到的三种软件环境。那么这一小节&#xff0c;我们将从 软件开发流程、角色…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...