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

重要提示:请首先完整阅读完文章内容后再操作,以免不必要的时间浪费!切记!!!

在使用vite+vue3开发uni-app项目时,存在低版本浏览器不兼容es6语法的问题,如“?.” “??” 等。为了方便使用jenkins自动化部署前端项目,我使用的是 uni-cli而非HBuilderX 创建的项目,当然使用uni-cli创建uni-app项目还有一个好处是可以使用其他软件如 vscode、Cursor 或者webstrom进行开发,这些软件可以集成AI功能,能方便我们使用AI辅助开发,提升开发效率。

在我的项目中使用的vite版本是5.2.8,如果需要前端项目支持低版本的浏览器,或者需要将较新的es语法转换成更低版本,那么只需要在 vite.config.js 中添加 build.target 配置即可,vite官方文档显示build.target的值为string或者string[],可以根据自己的兼容需求进行配置。如果未显式配置build.target,那么vite会使用默认值“modules”,根据文档说明,其作用等同于 ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']。

需要额外说明的是,对于vite v2或之后的版本不需要再单独安装使用包括 @vitejs/plugin-legacy以及其他任何babel插件解决浏览器兼容问题,前文提到vite已经内置了相关配置项(build.target),如果你使用了较新的vite版本,若强行在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',
        ],
    },
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/973414.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2026考研趋势深度解析:政策变化+高效工具指南

2026考研深度解析:趋势洞察高效工具指南,助你科学备战上岸 从政策变化到工具实战,这份千字攻略解决99%考生的核心焦虑 【热点引入:考研赛道进入“高难度模式”】 2025年全国硕士研究生报名人数突破520万,报录比预计扩…

javacv将mp4视频切分为m3u8视频并播放

学习链接 ffmpeg-demo 当前对应的 gitee代码 Spring boot视频播放(解决MP4大文件无法播放),整合ffmpeg,用m3u8切片播放。 springboot 通过javaCV 实现mp4转m3u8 上传oss 如何保护会员或付费视频?优酷是怎么做的? - HLS 流媒体加密 ffmpe…

二叉树(数据结构)

二叉树 二叉树也是用过递归定义的结构 先序遍历又称前序遍历 ​​ ​​ 按照先序遍历的方法去手算处理这个二叉树 ​​ 先A B C 再 A B D E C(也就是把B换成BDE再放进去) 再 A B D E C F 看这个插入的方法要掌握像二叉树这样向一个…

如何利用国内镜像从huggingface上下载项目

1、利用镜像快速下载项目 在huggingface上下载模型时速度太慢,可以用下面的方法 pip install -U huggingface_hub pip install huggingface-cliexport HF_ENDPOINThttps://hf-mirror.comhuggingface-cli download --resume-download shenzhi-wang/Llama3-8B-Chine…

Http升级为Https - 开发/测试服环境

1.应用场景 主要用于开发/测试服环境将http升级为https, 防止前端web(浏览器)出现Mixed Content报错; 2.学习/操作 1.文档阅读 deepseek 问答; 2.整理输出 报错信息: Mixed Content: The page at <URL> was loaded over HTTPS, but requested an insecure XMLHttpRequ…

网页制作01-html,css,javascript初认识のhtml的基本标记

一、 Html简介 英文全称是 hyper text markup language,超文本标记语言,是全球广域网上描述网页内容和外观的标准. Html作为一款标记语言,本身不能显示在浏览器中.标记语言经过浏览器的解释和编译,才能正确地反映html标记语言的内容. 1.html 的基本标记 1&#xff09;头部标…

分布式 IO 模块:水力发电设备高效控制的关键

在能源领域不断追求高效与可持续发展的今天&#xff0c;水力发电作为一种清洁、可再生的能源形式&#xff0c;备受关注。而要实现水力发电设备的高效运行&#xff0c;精准的控制技术至关重要。分布式 IO 模块&#xff0c;正悄然成为水力发电设备高效控制的核心力量。 传统挑战 …

【前端框架】vue2和vue3的区别详细介绍

Vue 3 作为 Vue 2 的迭代版本&#xff0c;在性能、语法、架构设计等多个维度均有显著的变革与优化。以下详细剖析二者的区别&#xff1a; 响应式系统 Vue 2 实现原理&#xff1a;基于 Object.defineProperty() 方法实现响应式。当一个 Vue 实例创建时&#xff0c;Vue 会遍历…

使用linux脚本部署discuz博客(详细注释版)

使用脚本部署一个discuzz项目 1.显示当前环境状态 防火墙状态 selinux状态 httpd状态 由上可知&#xff0c;虚拟机已处于最初始状态 2.脚本编写 #!/bin/bash #这是一个通过脚本来部署discuzz博客 firewalld关闭 systemctl stop firewalld if [ $? -eq 0 ];then echo "…

【代码审计】-Tenda AC 18 v15.03.05.05 /goform接口文档漏洞挖掘

路由器&#xff1a;Tenda AC 18 v15.03.05.05 固件下载地址&#xff1a;https://www.tenda.com.cn/material?keywordac18 1./goform/SetSpeedWan 接口文档&#xff1a; formSetSpeedWan函数中speed_di参数缓冲区溢出漏洞&#xff1a; 使用 binwalk -eM 解包固件&#xff0c…

正式页面开发-登录注册页面

整体路由设计&#xff1a; 登录和注册的切换是切换组件或者是切换内容&#xff08;v-if和 v-else)&#xff0c;因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。登录之后进到首页&#xff0c;有三个大模块&#xff1a;文章分类&…

Unity 位图字体

下载Bitmap Font Generator BMFont - AngelCode.com 解压后不用安装直接双击使用 提前设置 1、设置Bit depth为32 Options->Export options 2、清空所选字符 因为我们将在后边导入需要的字符。 Edit->Select all chars 先选择所有字符 Edit->Clear all chars i…

双重差分学习笔记

双重差分适用的研究场景&#xff1a; 研究某项政策或者冲击造成的影响 例如&#xff0c;某某小学在2024.12.12日颁布了小红花激励措施&#xff0c;我们要研究这项措施对学生成绩的影响&#xff0c;此时&#xff0c;就可以使用双重差分模型。 双重差分适用的数据类型&#xf…

项目设置内网 IP 访问实现方案

在我们平常的开发工作中&#xff0c;项目开发、测试完成后进行部署上线。比如电商网站、新闻网站、社交网站等&#xff0c;通常对访问不会进行限制。但是像企业内部网站、内部管理系统等&#xff0c;这种系统一般都需要限制访问&#xff0c;比如内网才能访问等。那么一个网站应…

数仓搭建(hive):DWB层(基础数据层)

维度退化: 通过减少表的数量和提高数据的冗余来优化查询性能。 在维度退化中&#xff0c;相关的维度数据被合并到一个宽表中&#xff0c;减少了查询时需要进行的表连接操作。例如&#xff0c;在销售数据仓库中&#xff0c;客户信息、产品信息和时间信息等维度可能会被合并到一…

多模态特征提取与融合助力高光谱+LiDAR数据分类性能飞跃

目录 论文解读 总体架构 CMIIE 模块工作模式 MLFFC模块工作模式 论文解读 提出了一种新的多模态特征提取模块CMIIE,可以捕获高光谱和LiDAR数据之间的互补信息。设计了一个多层特征融合分类模块MLFFC,通过对不同层级的特征进行融合来提高分类性能。使用对抗学习策略来指导网…

Flutter 正在推进全新 PlatformView 实现 HCPP, 它又用到了 Android 上的什么黑科技

跨平台开发里的 PlatformView 实现一直是一个经久不衰的话题&#xff0c;在之前的 《深入 Flutter 和 Compose 的 PlatformView 实现对比》 我们就详细聊过 Flutter 和 Compose 在 PlatformView 实现上的异同之处&#xff0c;也聊到了 Compose 为什么在相同实现上对比 Flutter …

Qt/C++面试【速通笔记一】

Qt 信号与槽机制 什么是信号&#xff08;Signal&#xff09;和槽&#xff08;Slot&#xff09;&#xff1f; 在Qt中&#xff0c;信号&#xff08;Signal&#xff09;和槽&#xff08;Slot&#xff09;是实现对象之间通信的一种机制。信号是对象在某些事件发生时发出的通知&…

《跟李沐学 AI》AlexNet论文逐段精读学习心得 | PyTorch 深度学习实战

前一篇文章&#xff0c;使用 AlexNet 实现图片分类 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于学习 9年后重读深度学习奠基作之一&#xff1a;AlexNet【下】【论文精读】】的心得。 《跟李沐…

【科研绘图系列】R语言绘制小提琴图、散点图和韦恩图(violin scatter plot Venn)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载画图1画图2画图3画图4画图5画图6画图7参考介绍 【科研绘图系列】R语言绘制小提琴图、散点图和韦恩图(violin & scatter plot & Venn) 加载R包 library…