关于Vite不能使用require问题

最新推荐文章于 2025-04-11 18:25:19 发布
最新推荐文章于 2025-04-11 18:25:19 发布
阅读量3.8w 收藏 37
点赞数 18
分类专栏： vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51431448/article/details/124398609
版权

咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换

为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源

vite却不能使用，确实有点点的难受，最近刚发现了一种开发时依赖插件vite-plugin-require-transform，那就试一下吧

vitejs/ awesome-vite - github地址： https://github.com/vitejs/awesome-vite

进去之后咱们搜索 require，然后选择第三个

带你进去之后即 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
王二红
01-01 7115
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
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项目 使用require 解决 ReferenceError: require is not defined 报错问题
蓝胖子的博客
03-24 2239
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
Vue2老项目转Vite教程（一套直接搞定，很详细）
最新发布
weixin_45188171的博客
04-11 729
vue2老项目直接转vite详细教程
vue项目实战系列三十四：vite的require
m0_68635815的博客
02-15 757
脚手架webpack迁移vite。
vite创建的项目不能使用require引入
weixin_46394325的博客
05-24 1319
vite构建项目不能用require引入的解决办法
《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
前端技术
03-01 2万+
Vite 不支持 require 解决方案（三种情况/require is not defined）
大坑？vite构建的vue项目不能直接使用require？
nuanua的博客
08-04 3461
大坑？vite构建的vue项目不能直接使用require？ vite npm
【经验教训】vite项目中不能使用require问题
weixin_37548429的博客
11-05 888
在 Vue 项目中，以前可以使用 require 来动态加载资源（如图片），因为在传统的 Webpack 配置中，require 被配置为可以处理动态导入。然而，在现代的 Vite 项目中，这种用法不再被支持，因为 Vite 的默认配置不包含对动态 require 的支持。这样，我们就可以在模板中使用动态生成的图片路径，而不需要直接在模板中使用 require。更好的替代方案：Vite 提供了其他方式来动态加载资源，如使用计算属性或方法来动态生成资源路径，然后在模板中使用这些路径。
vue3+vite不能使用require引入包的问题
11-14
当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `...
Vite中解决Require is not defined的问题
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-17 6479
然而，在使用Vite进行Vue项目的开发过程中，有时会遇到“require is not defined”的错误提示，这对于习惯了Webpack的开发者来说可能会感到困惑。通过上述方法，你可以有效地解决Vite中遇到的“require is not defined”问题，并确保你的Vue项目能够在现代浏览器环境中顺畅运行。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。如果你的应用中有一些依赖于CommonJS模块的代码，那么可以使用转换工具如。
在Vite中使用require
weixin_53156345的博客
07-11 5537
翻阅资料才发现问题所在，这是因为 require 是属于 Webpack 的方法，而我使用的是 Vite，所以我们需要去寻找 Vite 静态资源处理的方法，我在Vite官网中发现了解决办法。但是这么写又很不方便，感觉有点别扭，所以我又找到一个插件可以使用 require。最近在Vite项目中引入使用require引入静态资源时遇到了报错。所以，我们只需要将代码改写以下形式即可。然后vite.config.js中配置。这样就可以正常使用require了。
vite不支持 require 使用require报错 如何解决
c327127960的博客
02-09 7416
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工具包。
vite构建项目不能使用require解决方案
m0_59074147的博客
11-21 1272
在utils文件夹下创建一个getImgUrl.ts文件。在需要的页面引入并使用。
让 vite 支持 require 方法，只需要 50 行代码 （vite-plugin-require 插件）
weixin_44787578的博客
05-22 2087
可以看到一旦使用场景增加，再小的插件也会面临很多的问题需要考虑。仓库地址： https://github.com/wangzongming/vite-plugin-require开源与维护不易，记得给个start🌹。
在 vite + ts 中，使用require
pig_ning的博客
02-06 1849
require is not defined 在 vite + ts 中，使用require
解决在vite中无法使用require以及@
m0_52872381的博客
08-30 299
vue3+vite不能使用require的解决方案
m0_73003546的博客
09-29 1918
（欢迎一起学习交流~~~）因为在自己搭建的小项目中准备用require动态引入一下图片、文件等资源，但是结果却是报以下的错（require未被定义）。接下来你就可以在自己的.vue,.js文件中使用require进行引入了。于是就找了一些解决方案，以下的方案感觉用着简便明了。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值