vue3+ts+vite 引入静态资源require报错 ——解决方案

最新推荐文章于 2026-04-30 16:09:59 发布
原创 最新推荐文章于 2026-04-30 16:09:59 发布 · 2.6k 阅读 · 6
标签
#陈福国 #陈福国前端 #vue3require #require no defi #vue3静态资源路径

vue3中报错，导入reqire静态图片资源的时候，显示require不存在

 'require' is not defined

发现是 在vite中不能使用require引入图片资源，因为这里的require是webpack提供的一种加载能力，由于我们使用的是Vite，因此这里必须转用 Vite提供的静态资源载入
Vite中静态资源处理

官方示例

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById(
最低0.47元/天 解锁文章
Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
🏆 前端领域优质创作者
12-16 2万+
vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
🏆 前端领域优质创作者
01-01 1万+
vue3，vite，vite-plugin-require-transform，打包报错，运行报错，npmrunbuild出现一堆报错，执行打包命令后出现报错怎么办，vue3+vite使用vite-plugin-require-transform插件build打包时报错如何解决，vue3项目中运行打包出现了很多警告提示报错，vue3使用阿里云ali-oss插件sdk导致打包报错解决方法，vue引入ali-oss阿里云oss的sdk运行build打包时报错，vite打包失败，import*as_vi
《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
前端技术
03-01 2万+
Vite 不支持 require 解决方案（三种情况/require is not defined）
vue3中computed设置动态图片路径不生效+不可使用require引入图片
最新发布
m0_59483744的博客
04-30 156
Vue3中无法使用require的原因：1) require是Webpack特有语法；2) Vue3默认使用Vite构建工具；3) 直接使用会报错。推荐使用Vite支持的动态引入方式：通过new URL配合import.meta.url实现图片动态加载。静态图片可直接使用路径，但动态路径需特殊处理，因为Vite只会在编译时处理静态导入的路径。计算属性返回的字符串路径不会自动转换，必须使用new URL语法让Vite预构建生成可访问的URL。使用时需确保图片路径正确且计算属性在setup()中正确返回。
vue3+ts+vite 引入静态资源require报错
小菜张的博客
11-28 7988
vue3+ts+vite 引入静态资源require报错
Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源
热门推荐
Oliver尹的博客
07-28 2万+
Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源
动态引入图片资源 Vue3 Typeerror:require is not defined【Vite，Vue-cli】
qq_22841387的博客
05-26 2134
问题描述 在vite + vue3 + ts的项目架构下，在轮播图中，我想动态引入图片实现轮播图效果，出现报错如下 解决方法 const getAssetsImages = (name: string) => { return new URL(`/src/assets/${name}.jpg`, import.meta.url).href } 这样就可以通过获取对应图片的URL地址 使用实例 这里我将data单独封装了 当然这里对应图片类型和目录都可以进行扩展，通过参数传值，然后动态拼接即可
Vue3 动态引入图片: require is not defined报错
May21☀️
05-06 5189
问题：在 Vue3 项目中，使用 require 引入图片，报错 require is not defined。原因： Vue3 使用的是 vite，而 require 是 Webpack 的方法。
Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?
weixin_41012767的博客
10-25 9836
友情提示：如果你的项目用的是Vite，即框架是 Vue3+TypeScript+Vite，那么require是不能被使用的，vite中并没有require这种静态资源加载方法，因此如果是想动态的加载静态资源，应该到vite的官网上去查找vite如何引入静态资源。写上后代码波浪线报错，报错提示：找不到名称 “require”。按照提示在命令行工具中执行安装@type/node后波浪线依然存在，没有解决问题，后经过排查发现需要在ts的配置文件tsconfig.json中加上type类型，解决方式如下。
vue3 报错 require is not defined
w710537643的博客
03-21 5270
【代码】vue3 报错 require is not defined。
vue3 使用require报错：require is not defined
qq_43383334的博客
10-17 1万+
与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。否则代码将被原样保留，因而在 build.target 不支持 import.meta.url 时会导致运行时错误。在生产构建时，Vite 才会进行必要的转换（保证 URL 在打包和资源哈希后仍指向正确的地址）vite官网静态资源处理 new URL(url, import.meta.url)import.meta.url ： ESM 的原生功能，会暴露当前模块的 URL。
【学一点儿前端】vue3+vite不能使用require引入包的问题（require is not defined）
fangyuan__的博客
03-14 1万+
前端有很多的工具包是commonjs的写法，只能用require引入，而vite+vue3构建的项目不能使用require，只能用import，为了能够方便地引入commonjs工具包，我们需要把这些工具包转为es module。使用 @rollup/plugin-commonjs 插件，用于将CommonJS模块转换为ES6模块的Rollup插件.2、在vite.config.ts配置中添加该插件，注意 commonjs0必须在vue()上面，否则不生效。3、随意导入commonjs工具包。
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 8392
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
记错vue3+ts require 报错
banzhuanren1的博客
12-17 3196
事先声明 ，可能是版本不一样，所以解决办法不一样，报错的原因是Pack.json 文件中type值不同，解决办法有两种。在main.js 中使用require 报错 ‘require’ is not defined。方法二：type 为commonjs时 ，使用require 引入。方法一：type 为moudle 时 ，使用import 引入。pack.json 文件。pack.json 文件。
Vue3项目require引入css文件报错：require is not defined
acheding的博客
11-12 4641
用 import 代替require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
wzy_PROTEIN的博客
06-13 1万+
Uncaught (in promise) ReferenceError: require is not defined1、因为require是webpack提供的一种加载能力，但是vue3项目时搭配vite的，所以这里应该用vite提供的静态资源载入方法，将上面的require改为new URL这种格式，页面就可以正常加载静态资源了。new URL（‘路径’，import.meta.url）.href。
如何在vue3+vite+ts中使用require
一个韩韩韩
04-13 1万+
vue3+vite+ts中不能使用require <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使用requ
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
蓝胖子的博客
03-24 4142
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值