vue3 动态引入图片时报错之“require is not defined”

最新推荐文章于 2025-04-10 13:03:33 发布
最新推荐文章于 2025-04-10 13:03:33 发布
阅读量2.2k 收藏 4
点赞数 10
分类专栏： Web前端实践笔记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_61498310/article/details/136002237
版权
文章讲述了在Vue3项目中遇到requireisnotdefined错误，由于使用了Vite而非Webpack。提供了两种解决方案：一是通过newURL(url,import.meta.url).href引入图片，二是直接使用import。作者参考了夏兮颜的文章。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、背景

在vue3中使用require引入img时，发现控制台报错“require is not defined”。（如图所示）

二、原因

因为vue3项目使用vite创建的，而require是webpack提供的一种加载能力。

三、解决

方法一

使用new URL(url, import.meta.url).href的格式引入图片。

用法：

new URL（‘路径’，import.meta.url）.href
bigImg:new URL('./assets/logo.png', import.meta.url).href,
 方法二

直接使用import引用该图片路径。

备注

本文参考：夏兮颜

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运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）
王二红
03-26 6532
vue3，vite，vue3+vite报错，process，UncaughtReferenceError:processisnotdefined，浏览器控制台报错processisnotdefined解决方法，vue3如何解决报错，vite报错怎么办，前端打包UncaughtReferenceError:processisnotdefined，npmrunbuild打包报错，vite打包时出现错误，vue3打包运行找不到process，热更新会报错UncaughtRefer
Vue3 - vite 项目报错： require is not defined（解决el-image引入图片报错）
随手记
04-09 1321
1、静态引入图片错误代码页面报错显示：2、网上查了一些 ，很多都是说建议使用require,我也试了 ，代码没有提示错误，控制台报错了。
vue3 使用require引入静态图片、音频等提示Uncaught (in promise) ReferenceError: require is not defined
qq_48354174的博客
04-10 206
vite搭建项目,就需要使用new URL(url, import.meta.url).href的格式引入，import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源。
Vue3 动态引入图片: require is not defined报错
May21☀️
05-06 4890
问题：在 Vue3 项目中，使用 require 引入图片，报错 require is not defined。原因： Vue3 使用的是 vite，而 require 是 Webpack 的方法。
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 7881
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
vue3 使用require报错：require is not defined
qq_43383334的博客
10-17 9827
与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。否则代码将被原样保留，因而在 build.target 不支持 import.meta.url 时会导致运行时错误。在生产构建时，Vite 才会进行必要的转换（保证 URL 在打包和资源哈希后仍指向正确的地址）vite官网静态资源处理 new URL(url, import.meta.url)import.meta.url ： ESM 的原生功能，会暴露当前模块的 URL。
vue3 报错 require is not defined
w710537643的博客
03-21 5089
【代码】vue3 报错 require is not defined。
vue引入文件报错ReferenceError: require is not defined
最新发布
05-22
在 Vue 项目中遇到 `ReferenceError: require is not defined` 错误的原因通常是由于现代前端构建工具（如 Vite）不再支持 CommonJS 的 `require` 方法，而是推荐使用 ES Module 的 `import` 语法。以下是具体原因...
Vite中解决Require is not defined的问题
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-17 6463
然而，在使用Vite进行Vue项目的开发过程中，有时会遇到“require is not defined”的错误提示，这对于习惯了Webpack的开发者来说可能会感到困惑。通过上述方法，你可以有效地解决Vite中遇到的“require is not defined”问题，并确保你的Vue项目能够在现代浏览器环境中顺畅运行。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。如果你的应用中有一些依赖于CommonJS模块的代码，那么可以使用转换工具如。
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
蓝胖子的博客
03-24 2077
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
vue3中require报错 require is not defined
热门推荐
lys20000913的博客
02-16 2万+
vue2中使用 const path = require("path") const files = require.context("../module", true, /\index.vue$/) files.keys().forEach(key => { const name = path.dirname(key).slice(2) that.$options.components[name] = require('../module/'
Vue3学习：vite项目中图片不能显示，报错 require is not defined
wangyining070205的博客
10-19 1823
于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。
【学一点儿前端】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工具包。
vue3 动态引入图片时require is not defined
Dnn01的博客
12-11 1289
【代码】vue3 动态引入图片时require is not defined。
vue3 引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
Hermia_yuan的博客
08-04 2345
如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。是一个 ESM 的原生功能，会暴露当前模块的 URL。如果项目是用vite搭建的,就需要使用。
vue3 require is not defined
weixin_45594156的博客
01-04 1257
vue3 require is not defined import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。前言：我想在vue3项目的页面引入图片总是不成功，最后看到说是Vite在作祟，让我来瞧瞧，是怎么回事咧。那么就用不到require 了，去掉直接引入imgUrl使用。
Vue javascript error require is not defined
kingroc的博客
11-12 1万+
Vue项目中出现， require是node环境中的方法，所以需要在在env中声明，有两个位置需要声明.eslintrc.js和package.json javascript error require is not defined "eslintConfig": { "root": true, "env": { "node": true }, .................... module.exports = { "env": {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值