vue2+vite+@vitejs/plugin-vue2可以使用require引用图片资源

很多文章都说vite不能用require,vue3+vite确实是这样的,但今天无意间发现vue2+vite中是可以使用require引用资源的

vue3搭配vite一般使用的是@vitejs/plugin-vue解析vue语法,而vue2使用的则是另一个插件@vitejs/plugin-vue2插件解析vue语法

看下了@vitejs/plugin-vue2源码在src/template.ts中,对require语法做了处理,匹配到后进行语法替换

function transformRequireToImport(code: string): string {
  const imports: Record<string, string> = {}
  let strImports = ''

  code = code.replace(
    /require\(("(?:[^"\\]|\\.)+"|'(?:[^'\\]|\\.)+')\)/g,
    (_, name): any => {
      if (!(name in imports)) {
        // #81 compat unicode assets name
        imports[name] = `__$_require_${hash(name)}__`
        strImports += `import ${imports[name]} from ${name}\n`
      }

      return imports[name]
    }
  )

  return strImports + code
}

在这里插入图片描述
该提交是尤大自己写的,https://github.com/vitejs/vite-plugin-vue2/commit/893cbf6ae1e01e39bcf90405bcaa7707b1550564

在这里插入图片描述
@vitejs/plugin-vue则没有该功能,不能使用require,这应当出于vue2项目需要迁移vite的考虑,尤大才做了兼容处理,而vue3+vite一般是从新开发,不需要兼容require这种写法,更推荐import.meta.url这类新规范写法

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

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

相关文章

易基因:NAR:RCMS编辑系统在特定细胞RNA位点的靶向m5C甲基化和去甲基化研究|项目文章

喜讯&#xff01;易基因表观转录组学RNA-BS技术服务见刊《核酸研究》 大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 2024年2月15日&#xff0c;吉林大学张涛、赵飞宇、李金泽为共同第一作者&#xff0c;吉林大学李占军、隋婷婷及赖良…

Oracle 的同义词(Synonym) 作用

Oracle 同义词(Synonym) 是数据库对象的一个别名&#xff0c;Oracle 可以为表、视图、序列、过程、函数、程序包等指定一个别名。同义词有两种类型&#xff1a; 私有同义词&#xff1a;拥有 CREATE SYNONYM 权限的用户(包括非管理员用户)即可创建私有同义词&#xff0c;创建的…

蓝桥杯嵌入式省赛模板构建——测量两路频率和占空比

结合测量一路PWM频率编程 测量占空比&#xff1a;测量高电平持续时间和周期 思路&#xff1a; ①.第一次上升沿中断&#xff0c;清零计数器&#xff0c;开始计时并改成下降沿中断 ②.下降沿中断&#xff0c;获取计数值T1&#xff0c;并改为上升沿中断 ③.第二次上升沿中断…

一个本科渣渣是怎么逆袭从咸鱼到Offer收割机的,Android开发了解这些自然无惧面试

面试题 一般Android面试分为两部分&#xff1a;Java部分和Android部分&#xff0c;下面说一下自己面试过程遇到的一些具体题目和一些相关知识点。 一 JAVA相关 点击领取完整开源项目《安卓学习笔记总结最新移动架构视频大厂安卓面试真题项目实战源码讲义》 1&#xff09;JAVA…

RabbitMQ(任务模型,交换机(广播,订阅,通配符订阅))

一.WorkQueues模型 WorkQueues(任务模式):让多个消费者绑定到一个队列&#xff0c;共同消费队列中的消息。 架构: 所需场景: 当消息处理比较耗时的时候&#xff0c;可能生产消息的速度会远远大于消息的消费速度。长此以往&#xff0c;消息就会堆积越来越多&#xff0c;无法及…

工业镜头的重要参数之视场、放大倍率、芯片尺寸--51camera

今天来简单介绍下工业镜头中常用的参数中的三个&#xff1a; 1、视场 视场&#xff08;FOV&#xff09;也称视野,是指能被视觉系统观察到的物方可视范围。 对于镜头而言&#xff0c;可观察到的视场跟镜头放大倍率及相机芯片选择有关。因此需要根据被观察物体的尺寸&#xff…

docker安装和配置minio

1. 安装镜像 docker pull minio/minio:latest上方的命令是拉取最新版本, 目前我的版本为1.29.0 2. 运行minio 客户端端口号: 29000 ,服务端端口号: 29090 docker run -p 29000:29000 -p 29090:29090 \--name minio \-d --restartalways \-e "MINIO_ACCESS_KEYminioadm…

《花书》学习:LeNet

# LeNet网络架构 正常的应该是&#xff1a;输入→操作→输出 但都简化 要么省略 操作 要么省略 输出 # LeNet第一个卷积层详解

华为OD七日集训第1期 - 按算法分类,由易到难,循序渐进,玩转OD

目录 一、适合人群二、本期训练时间三、如何参加四、七日集训第 1 期&#xff0c;极简题&#xff0c;培养刷题兴趣五、精心挑选21道高频100分经典题目&#xff0c;作为入门。第1天、逻辑分析第2天、字符串处理第3天、数组第4天、数据结构第5天、栈第6天、双指针第7天、二分查找…

Java面试题【必知必会】Spring常见面试题(2024)

近期一直在准备面试&#xff0c;所以为了巩固知识&#xff0c;也为了梳理&#xff0c;整理了一些java的基础面试题&#xff01;同时也希望各位英雄和女侠能够补充&#xff01;不胜荣幸&#xff01;&#xff01;&#xff01; 1.spring是什么&#xff1f;它的优点是什么&#xff…

灯塔:CSS笔记(1)

CSS&#xff1a;层叠样式表 所谓层叠 即叠加的意思&#xff0c;表示样式可以一层一层的层叠覆盖 css写在style标签中&#xff0c;style标签一般写在head标签里面&#xff0c;title标签下面 <!DOCTYPE html> <html lang"en"> <head><meta cha…

js设计模式:解释器模式

作用: 对文本进行解释和编译的时候,就会用到解释器模式 比如你写了一段js代码,js引擎就会去解释并执行这段代码 webpack中的各种loader就是用来解释各种文件类型的,并将其解释为js可识别的代码 示例: //翻译词库const wordList [{text:韩信前期有蓝有红,必须拿二杀。你要是…

衣服晒三天湿臭,AI果蝇图片一般,玩物让生活更急幸福——早读(逆天打工人爬取热门微信文章解读)

回南天&#xff0c;衣服晒三天湿臭 引言python代码第一篇 人民日报 极简工作报告第二篇 人民日报 【夜读】5个好习惯&#xff0c;让生活更幸福第三篇 人民日报 来了&#xff01;新闻早班车要闻社会政策 结尾 路漫漫其修远兮&#xff0c;犹如披荆斩棘翻越高山之巅 在疾风骤雨中砥…

#QT(TCP网络编程-服务端)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;编写一个tcp服务端 QTcpsever QTcpsocket 3.记录&#xff1a; (1)先搭建界面 &#xff08;2&#xff09;服务端代码 a. pro QT core gui networkgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c1…

2024关于idea激活码报This license xxxx has been suspended

HOSTS文件中增加 0.0.0.0 www.jetbrains.com 0.0.0.0 account.jetbrains.com 然后

7、Linux-防火墙和配置静态ip

一、防火墙&#xff08;防火墙服务名firewalld&#xff09; 防火墙配置命令&#xff1a;firewall-cmd firewall-cmd --help&#xff1a;防火墙帮助firewall-cmd --state&#xff1a;查看防火墙状态firewall-cmd --zonepublic --list-ports&#xff1a;查看所有打开的端口firew…

三大数学软件之Maple

相信钻研数学的小伙伴们对MATLAB、SPSS这样的重量级软件并不陌生&#xff0c;这些大型软件能求解复杂的运算&#xff0c;解决各领域的数学问题。今天博主为大家带来了一款名不见经传的软件——Maple&#xff0c;作为三大数学软件之一&#xff0c;Maple同样拥有不菲的计算能力&a…

医院电动床脚踏开关的机械强度测试检测

医院电动床是现代医疗设备中不可或缺的一部分。它们提供了病人安全舒适的床位&#xff0c;并具备调节床位高度和角度的功能。然而&#xff0c;在日常使用过程中&#xff0c;医院电动床的各个部件可能会受到一定程度的磨损和摩擦。因此&#xff0c;确保电动床的每个关键部件的机…

TRIZ理论破解重量与强度难题:材料科学的革命性突破!

在机械结构设计的领域里&#xff0c;工程师们常常面临着一个难以抉择的问题&#xff1a;如何在保证结构强度的同时&#xff0c;尽可能地减轻重量&#xff1f;传统的惯性思维可能会让我们倾向于增加材料的厚度来增强结构的稳固性&#xff0c;但这样一来&#xff0c;结构的重量也…

SpringBoot集成flink

Flink是一个批处理和流处理结合的统一计算框架&#xff0c;其核心是一个提供了数据分发以及并行化计算的流数据处理引擎。 最大亮点是流处理&#xff0c;最适合的应用场景是低时延的数据处理。 场景&#xff1a;高并发pipeline处理数据&#xff0c;时延毫秒级&#xff0c;且兼具…