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

news2024/9/23 7:32:09

很多文章都说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这类新规范写法

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

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

相关文章

表单验证、属性绑定(一个属性根据另一个属性有无进行操作)

表单验证 一个属性根据另一个属性有无进行操作&#xff08;属性绑定&#xff09; 1、问题描述 ​ 需求&#xff1a;表单里面后两个属性需要根据前面一个属性进行有无判断。如果前面属性没有输入值&#xff0c;则不需要进行操作&#xff1b;如果前面属性有输入值&#xff0c;则…

胜出之道:NCDA设计大赛获奖作品解读与交互程序设计的优化策略

第12届大赛简介 - 未来设计师全国高校数字艺术设计大赛&#xff08;NCDA&#xff09;开始啦&#xff01;未来设计师全国高校数字艺术设计大赛&#xff08;NCDA&#xff09;是由工信部人才交流中心主办&#xff0c;教育部中国高等教育学会认定&#xff0c;教育厅发文立项&#x…

RedisDesktopManager连接Ubuntu的Redis失败解决办法

配置redis 1.设置redis在后台服务&#xff0c;修改配置文件 默认情况下是 no ,修改为yes&#xff0c;可以后台服务 2、设置redis端口&#xff0c;默认端口是6379&#xff0c;可以根据自己的需要&#xff0c;找到/et/redis/redis.conf文件, 修改port 3、设置密码 配置文件中…

AI论文速读 | TimeXer:让 Transformer能够利用外部变量进行时间序列预测

题目&#xff1a; TimeXer: Empowering Transformers for Time Series Forecasting with Exogenous Variables 作者&#xff1a;Yuxuan Wang ; Haixu Wu&#xff08;吴海旭&#xff09; ; Jiaxiang Dong ; Yong Liu ; Yunzhong Qiu ; Haoran Zhang ; Jianmin Wang&#xff08;…

会员营销中如何让会员主动完善信息?

会员主动完善信息&#xff0c;可以通过积分、优惠券、会员权益进行激励。 会员信息主要包括会员姓名、生日、地址、兴趣爱好等&#xff1b;需要让会员完善的信息要围绕营销目标和营销计划&#xff0c;不要过度收集会员信息。 在博阳会员管理系统中定义会员完善个人信息页&#…

Java面试题总结8:springboot

Spring Boot自动配置原理 importConfigurationSpring spi 自动配置类由各个starter提供&#xff0c;使用ConfigurationBean定义配置类&#xff0c;放到META-INF/spring.factories下 使用Spring spi扫描META-INF/Spring.factories下的配置类 如何理解Spring Boot中Starter …

STM 32 HAL库 UART 调试的问题

问题1&#xff1a;STM32G0 系列 DMA中断接收&#xff0c;应用层无法接收到数据 分析&#xff1a; Debug发现&#xff0c;最终没有进入串口中断函数 。 于是&#xff0c;检查Stm32CubeMX 的工程配置 两个串口的全局中断没有使能。 解决&#xff1a;勾选上图中红框部分&#x…

STM32CubeIDE基础学习-安装芯片固件支持包

STM32CubeIDE基础学习-添加芯片固件支持包 前言 前面的文章在安装STM32CubeIDE软件时没有安装这个芯片PACK包&#xff0c;如果工程没有这个固件支持包的话是无法正常使用的&#xff0c;随便安装一个和芯片对应系列的支持包就可以了。 这篇文章来记录一下新增PACK包的常用操作…

SUSE12系统破解root密码

SUSE12系统破解root密码 1、重启系统&#xff0c;重启时出现引导界面&#xff0c;按e 2、在启动 linux 的启动选项里加上 init/bin/bash&#xff0c;然后按 F10 启动&#xff0c;通过给内核传递 init/bin/bash 参数使得 OS 在运行 login 程序之前运行 bash&#xff0c;出现命令…

微服务知识03

1、ES搜索引擎,高性能的分布式搜索引擎,底层基于Lucene 主要用于应用程序中的搜索系统 日志收集 2、基础概念 3、流程 4、 5、下载中文分词器

微信小程序开发系列(十八)·wxml语法·声明和绑定数据

目录 1. 双大括号写法用法一&#xff1a;展示内容 步骤一&#xff1a;创建一个data对象 步骤二&#xff1a;双大括号写法的使用 步骤三&#xff1a;拓展 2. 双大括号写法用法二&#xff1a;绑定属性值 步骤一&#xff1a;给对象赋一个属性值 步骤二&#xff1a;双大括…

两天学会微服务网关Gateway-Gateway路由规则

锋哥原创的微服务网关Gateway视频教程&#xff1a; Gateway微服务网关视频教程&#xff08;无废话版&#xff09;_哔哩哔哩_bilibiliGateway微服务网关视频教程&#xff08;无废话版&#xff09;共计17条视频&#xff0c;包括&#xff1a;1_Gateway简介、2_Gateway工作原理、3…

行人实时动作识别

详细资料和代码请加微信&#xff1a;17324069443 一、项目介绍 基于PyTorchVideo的实时动作识别框架&#xff1a; 我们选择了yolov5作为目标检测器&#xff0c;而不是Faster R-CNN&#xff0c;它速度更快、更方便。 我们使用一个跟踪器&#xff08;deepsort&#xff09;来为不…

STM32(15)USART编程

使用USART实现STM32与电脑之间的通信 中介&#xff1a;USB转TTL模块 闭合总开关&#xff0c;外部时钟才会传输到分频器 c8t6手册里面写了&#xff0c;usart最大支持4.5MHz&#xff0c;所以选10 重映射时记得开启AFIO的时钟

什么是MAC地址? win10电脑查看MAC地址的多种方法

您是否知道连接到家庭网络的每件硬件都有自己的身份&#xff1f;正如每个设备都分配有自己的 IP 地址一样&#xff0c;每个硬件都有一个唯一的网络标识符。 该标识符称为MAC 地址。MAC 代表媒体访问控制。您可能需要 MAC 地址来解决网络问题或配置新设备。在 Windows 中查找您…

java常用应用程序编程接口(API)——Arrays概述

前言&#xff1a; 学到Arrays了&#xff0c;整理下心得。打好基础&#xff0c;daydayup! Arrays 用来操作数组的一个工具类 Arrays的常见方法 方法名说明public static String toString(类型[] arr)返回数组的内容public static int[ ] copyOfRange(类型[ ] arr,启示索引&…

机器人工具箱学习(二)

一、机械臂及运动学 1.1 机械臂构成 机械臂多采用关节式机械结构&#xff0c;一般具有6个自由度&#xff0c;其中3个用来确定末端执行器的位置&#xff0c;另外3个则用来确定末端执行装置的方向(姿态)。   如图所示&#xff0c;一个机械臂是由一组可做相对运动的关节连接的连…

[译]BNF 表示法:深入了解 Python 的语法

[译]BNF 表示法&#xff1a;深入了解 Python 的语法 原文&#xff1a;《BNF Notation: Dive Deeper Into Python’s Grammar》 https://realpython.com/python-bnf-notation/ 在阅读Python文档的时候&#xff0c;你可能已经遇到过BNF(Backus–Naur form)表示法&#xff1a; 下…

运维:记一次寻找定时任务并删除的经历

前言 我相信接手别人的服务器、或者在没有任何文档的情况去看自己原先的服务器,都或多或少会遇到莫名其妙的服务器独有规则。 比如你服务本身跑的好好的,突然啪的一下,没了! 什么原因导致的呢?其中,很大可能是定时任务在作祟。 原因分析 本次,我遇到的问题是:在Ubuntu系…

如何用Elementor创建WordPress会员网站

在下面的文章中&#xff0c;我们将向您展示如何使用Elementor和MemberPress在WordPress中轻松构建会员网站。这篇文章将涵盖WordPress会员网站设置过程、会员资格和受保护内容创建、重要页面和登录表单设计、电子邮件通知管理、报告等。 目录 什么是WordPress会员网站&#x…