解决vue3 + vite + ts 中require失效的问题(require is not defind)

require is not defind因为require是属于webpack的方法,vite中找不到这个方法肯定报错

解决办法

通过vite官网了解到新的引入方式,我使用了其中一种

imgList: [{name: "lj",src: new URL('../../assets/img/applyList.png', import.meta.url).href,title: "这是lj.png"},{name: "logo",src: new URL('../../assets/img/applyList.png', import.meta.url).href,title: "这是logo.png"},{name: "bg",src: new URL('../../assets/img/applyList.png', import.meta.url).href,title: "这是bg.png"},{name: "sadmas",src: new URL('../../assets/img/applyList.png', import.meta.url).href,title: "这是sadmas.png"}]

 创建一个js

创建方法:创建一个工具文件getImge.ts

// 获取assets静态图片
export const getAssetsImge = (url: string) => {return new URL(`../assets/home/${url}`, import.meta.url).href
}

使用工具文件

import { getAssetsImge } from '@/utils'

html

          <el-avatar class="w-6 h-6" :src="getAssetsFile('user.png')" /><img class="w-6 h-6" :src="getAssetsFile('user.png')" alt="" /> 

借鉴文章:

vite+vue3中require is not defined-CSDN博客

解决vue3 + vite + ts 中require失效的问题(require is not defind)_vue3 require is not defined_夹道欢呼的博客-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebAPI+EF连接SQL Server数据库

右击解决方案-添加-新建项目-选择“类库&#xff08;.NET Framework&#xff09;”,新建的项目取名叫WebApi1.EF 添加EF&#xff1a; 新建一个ADO实体数据模型 选择DBFirst 数据源选择MySql 填写数据库地址及账号密码 选择实体框架版本 选择在数据库中的表User 到此配置完成&am…

非母语玩家如何撰写英文研究性论文:1 Introduction

参考书——《Science research writing for non-native speakers of English》 文章目录 1 结构问题2 语法与撰写技巧2.1 Tense pairs&#xff1a;时态对2.2 Signaling Language2.3 Passive/Active 主动与被动语态2.4 Paragraphing 分段 3 Writing Task: Building a Model——构…

C/C++笔试易错与高频题型图解知识点(二)—— C++部分(持续更新中)

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2 引用&引用与指针的区别 2.1 引用初始化以后不能被改变&#xff0c;指针可以改变所指的对象 2.2 引用和指针的区别 3 构造函数与析构函数系列题 3.1构造函数与析…

VScode platformio的使用

一、platformio 工程创建 打开vscode界面你会发现左下多了个家的小图标&#xff0c;点击这里就可以进入platformio。 在右侧Quick Access栏中&#xff0c;有4个选项。可以看得出来&#xff0c;我们这里直接点击创建一个新的工程。 点击New Project打开project配置界面&#x…

图详解第四篇:单源最短路径--Dijkstra算法

文章目录 1. 最短路径问题2. 单源最短路径--Dijkstra算法算法思想图解如何存储路径及其权值代码实现调式观察打印最短路径Dijkstra算法的缺陷 3. 源码 1. 最短路径问题 最短路径问题&#xff1a; 从带权有向图&#xff08;求最短路径通常是有向图&#xff09;G中的某一顶点出发…

Unity——数据存储的几种方式

一、PlayerPrefs PlayerPrefs适合用于存储简单的键值对数据 存储的数据会在游戏关闭后依然保持&#xff0c;并且可以在不同场景之间共享&#xff0c;适合用于需要在游戏不同场景之间传递和保持的数据。 它利用key-value的方式将数据保存到本地&#xff0c;跟字典类似。然后通…

【排序算法】详解直接插入排序和希尔排序原理及其性能分析

文章目录 插入排序算法原理细节分析代码实现复杂度分析:稳定性分析:与冒泡排序的对比 希尔排序算法原理细节分析代码实现复杂度分析稳定性分析 总结对比 插入排序 算法原理 插入排序又或者说直接插入排序,是一种和冒泡排序类似的并且比较简单的排序方法&#xff0c; 基本思想…

android aidl Can‘t resolve Salary问题

** 解决方法 ** 在数据aidl中写上包名&#xff0c;并且保证他的实体类也应当在与数据aidl文件相同的java类的包下 如果实例类放在aidl文件中会报一些稀奇古怪的错误&#xff0c;可以生成.java文件但是里面的实体类是不能识别的

Swagger使用

Swagger 简介 号称世界上最流行的API框架&#xff1b;Restful API 文档在线生成工具 —> API文档与API定义同步更新直接运行&#xff0c;可以在线测试 API 接口&#xff1b;支持各种语言&#xff1b;&#xff08;Java&#xff0c;PHP…&#xff09; 官网 Spring Boot 集…

BUUCTF学习(5): 命令执行Ping

1、介绍 2、解题 127.0.0.1|cat /flag 结束

Unity-3D模型展示

将3D模型放置到某个位置&#xff0c;然后通过鼠标左键进行旋转的操作 一种方法是添加另外的相机&#xff0c;采用RenderTexture来渲染该相机的内容 那么RenderTexture是做什么的呢&#xff1f; RenderTexture可以捕获从摄像机、光源和其他对象渲染的图像&#xff0c;并将结果…

如何使用FME开发自动化分析报告功能

目录 前言 一、使用的技术栈 二、技术难点解析 1.专题图 2.WORD文档实现 2.1 动态标题 2.3动态表格和文本 2.3专题图插入 三、完成NewGIS部署 四、模板总览图 总结 前言 一个标准项目分析报告需要需要包括3个方面&#xff1a; 文本叙述&#xff0c;主要体现在对某项专项数据的…

cmd进程简单操作指令

dir 查询当前路径和子路径 start空格加自己的exe程序&#xff0c;可运行程序。 taskkill /?可以执行很多&#xff0c;通常用于结束程序。 taskkill /f /im qq.exe 启动nginx.exe 查看运行的进程有哪些 选择结束nginx.exe

Python文件共享+cpolar内网穿透:轻松实现公网访问

文章目录 1.前言2.本地文件服务器搭建2.1.Python的安装和设置2.2.cpolar的安装和注册 3.本地文件服务器的发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 数据共享作为和连接作为互联网的基础应用&#xff0c;不仅在商业和办公场景有广泛的应用&#…

数据结构----算法--五大基本算法

数据结构----算法–五大基本算法 一.贪心算法 1.什么是贪心算法 在有多个选择的时候不考虑长远的情况&#xff0c;只考虑眼前的这一步&#xff0c;在眼前这一步选择当前的最好的方案 二.分治法 1.分治的概念 分治法&#xff1a;分而治之 将一个问题拆解成若干个解决方式…

uni-app--》基于小程序开发的电商平台项目实战(六)

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…

docker入门加实战—docker常见命令

docker入门加实战—docker常见命令 在介绍命令之前&#xff0c;先用一副图形象的展示一下docker的命令&#xff1a; 常见命令 docker的常见命令和文档地址如下表&#xff1a; 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerRegistrydocker pus…

EmoTalk: Speech-Driven Emotional Disentanglement for 3D Face Animation

问题:现存的方法经常忽略面部的情感或者不能将它们从语音内容中分离出来。 方法:本文提出了一种端到端神经网络来分解语音中的不同情绪,从而生成丰富的 3D 面部表情。 1.我们引入了情感分离编码器(EDE),通过交叉重构具有不同情感标签的语音信号来分离语音中的情感和内容。…

【广州华锐互动】塔吊多人安拆VR互动培训系统

塔吊多人安拆VR互动培训系统由广州华锐互动制作&#xff0c;是一种基于VR技术的模拟实训系统&#xff0c;专门用于培训塔吊驾驶员和操作员。 在现实生活中&#xff0c;塔吊操作具有一定的危险性&#xff0c;尤其是在培训过程中容易发生意外。而使用VR互动实训系统&#xff0c;学…

金融用户实践|分布式存储支持数据仓库业务系统性能验证

作者&#xff1a;深耕行业的 SmartX 金融团队 闫海涛 估值是指对资产或负债的价值进行评估的过程&#xff0c;这对于投资决策具有重要意义。每个金融公司资管业务人员都期望能够实现实时的业务估值&#xff0c;快速获取最新的数据和指标&#xff0c;从而做出更明智的投资决策。…