如何在vue3+vite+ts中使用require

vue3+vite+ts中不能使用require

之前使用vue2，去动态设置图片src属性时，采用require，但是vue3+vite+ts中使用require，项目能够运行，但浏览器中报错require未定义，require使用失败，安装@types/node之后使用require也未成功。

HTML

<img :src="getAssetsImages(children.icon.type)" alt="" style="width: 35px;height: 35px;">

1、vue2中给图片动态设置src属性

// 动态获取图片
const getAssetsImages = (name) => {return require(`/src/common/images/menu/${name}.png`)
}

2、vue3+vite+ts可以采用如下方案代替

// 动态获取图片
const getAssetsImages = (name) => {return new URL(`/src/common/images/menu/${name}.png`, import.meta.url).href
}

如何在vue3+vite+ts中使用require相关推荐

【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...
vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss
一.vue3.x 样式新特性样式穿透深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
webRtc播放rtsp视频流（vue2、vue3+vite+ts）
一.下载webRtc 开发环境用的win10版本的. github上直接下载,速度感人. Releases · mpromonet/webrtc-streamer · GitHub 提供资源下载,0积 ...
vue3 + vite + ts + pinia + yarn
Vue3 + Vite + TypeScript + Pinia + Yarn yarn 常用命令 vite 构建工具 vite 创建项目 Vue 3 vue 3 组件库 vue 文档组合式 API ...
vue3 + vite + ts 设置 @ 路径别名
由于 vite 创建项目后,tsconfig.json 已配置好对应别名,因此只需单独配置 vite.config.ts 即可. 目前 tsconfig.json 中应已有如下代码 "pat ...

如何在vue3+vite+ts中使用require

vue3+vite+ts中不能使用require

如何在vue3+vite+ts中使用require相关推荐

最新文章

热门文章