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

最新推荐文章于 2025-06-12 11:30:02 发布

原创最新推荐文章于 2025-06-12 11:30:02 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Web前端实践笔记专栏收录该内容

11 篇文章

订阅专栏

文章讲述了在Vue3项目中遇到requireisnotdefined错误，由于使用了Vite而非Webpack。提供了两种解决方案：一是通过newURL(url,import.meta.url).href引入图片，二是直接使用import。作者参考了夏兮颜的文章。

一、背景

在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引用该图片路径。

备注

本文参考：夏兮颜

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端花卷

关注关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

7256

vue3，vite，vue3+vite报错，process，UncaughtReferenceError:processisnotdefined，浏览器控制台报错processisnotdefined解决方法，vue3如何解决报错，vite报错怎么办，前端打包UncaughtReferenceError:processisnotdefined，npmrunbuild打包报错，vite打包时出现错误，vue3打包运行找不到process，热更新会报错UncaughtRefer

参与评论您还未登录，请先登录后发表或查看评论

Vue3.x 出现 _unref is not defined 错误，vue3使用图片img src require 动态修改图片。

技术前端，忠于热爱 @回忆哆啦没有A梦

03-29

2929

Vue3.x 出现 _unref is not defined 错误，vue3使用图片img src require 动态修改图片。

解决vuecli3中img src 的引入问题

12-28

最近公司要做一个在线ps 的项目但是后台没写完, 我在用本地图片上传预览的时候发现图片不能显示, 解决的办法是 //页面的结构 <div class=workspace> <img src='img'> </div> export default { data() { return { img:require('../../assets/fapiao.jpeg'), //这里只能使用require的方式去使用如果img 是数组, 就用 //[require('../../assets/fapiao1.jpeg'), //require('../.

Vue3 动态引入图片: require is not defined报错

May21☀️

05-06

5132

问题：在 Vue3 项目中，使用 require 引入图片，报错 require is not defined。原因： Vue3 使用的是 vite，而 require 是 Webpack 的方法。

【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined

m0_69892739的博客

12-25

8293

因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。

vue3 使用require报错：require is not defined

12-12

在Vue 3中使用`require`报错：`require is not defined`，通常是因为在客户端代码中直接使用了Node.js的`require`语法，而浏览器环境中并不支持Node.js的模块系统。以下是一些解决方法： 1. **使用ES6模块语法**： ...

使用 require 动态引入图片路径报错 ReferenceError: 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 require is not defined

weixin_45594156的博客

01-04

1410

vue3 require is not defined import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。前言：我想在vue3项目的页面引入图片总是不成功，最后看到说是Vite在作祟，让我来瞧瞧，是怎么回事咧。那么就用不到require 了，去掉直接引入imgUrl使用。

vue3 引入图片报错 Uncaught (in promise) ReferenceError: require is not defined

Hermia_yuan的博客

08-04

2539

如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。是一个 ESM 的原生功能，会暴露当前模块的 URL。如果项目是用vite搭建的,就需要使用。

Vue3学习：vite项目中图片不能显示，报错 require is not defined

wangyining070205的博客

10-19

1916

于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。

vue3 动态引入图片时require is not defined

Dnn01的博客

12-11

1334

【代码】vue3 动态引入图片时require is not defined。

Vue.js 中 “require is not defined“

weixin_42508745的博客

06-12

2447

解决 Vue.js 中 “require is not defined” 错误当你在 Vue.js 项目中使用 require 时遇到 “require is not defined” 错误，这通常是因为你的项目使用了而不是 CommonJS 的 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工具包。