Electron-Vue程序启动控制台报错：Uncaught ReferenceError: require is not defined at (index):1

最新推荐文章于 2024-08-30 15:40:15 发布
最新推荐文章于 2024-08-30 15:40:15 发布
阅读量6.7k 收藏 5
点赞数
分类专栏： Electron Node.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigFamer/article/details/111594514
版权
本文档描述了在使用Electron-Vue构建项目时遇到的`require is not defined`错误。作者分析了问题原因，指出由于Electron的本质结合了Chromium和Node.js，因此在浏览器环境中不能直接使用Node.js的`require`。解决方案是在`index.js`或`main.js`中设置`nodeIntegration: true`，并介绍了解决原生Node模块在Electron中使用的问题，包括重新编译模块的步骤。最后提供了相关参考资料链接。
摘要由CSDN通过智能技术生成

一、前言

我在使用electron制作exe安装包的项目中用到了nodejs的一个usb模块，遇到了一些问题。

二、问题描述

npm install安装（我的这个版本是：“usb”: “^1.6.3”,）之后，启动项目之后发现页面空白，我打开控制台发现了这样的报错：
在这里插入图片描述

三、问题分析和解决

1、分析

这里需要知道electron本质是什么，来看一张图片：
在这里插入图片描述
Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。
Chromium就是一个（种）浏览器，所以，这时候就需要看下你是不是在浏览器中运行node.js的模块了.不要把node.js和js搞混了

最低0.47元/天 解锁文章
Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王佳斌
12-16 1万+
vue3，vite，报错解决，vue3+vite报错require is not defined，vue3 vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3 vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“require is not defined”问题，vite项目require语法兼容问题解决 require is not define
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作...
纯html项目配置babel，报错Uncaught ReferenceError: require is not defined
卡卡西：一个擅长拷贝的前端程序员
05-26 5661
需求描述 有时候想要写一个简单的测试 demo，只需要一个 html文件 + 一个js文件，但是需要 import 一些npm包，如何做简单的 babel 配置呢？ 操作步骤 创建项目 mkdir demo cd demo 此时 demo 目录下空空如也，什么也没有。 npm初始化 npm init 一路回车，此时 demo 下新增了一个 package.json 文件 新增 src/index.js 和 index.html 文件，目录结构如下： | - src | |- index.j
vue中出现“error ‘xxx‘ is defined but never used ”问题解决方法
最新发布
weixin_74009895的博客
08-30 502
vue中出现“error 'xxx' is defined but never used ”问题解决方法
运行node app.js 错误：Uncaught ReferenceError: require is not defined
qq_38334677的博客
07-24 1万+
浏览器中，得到Uncaught ReferenceError: require is not defined 错误
【已解决】Uncaught ReferenceError: require is not defined
热门推荐
木得是的博客
06-14 3万+
当我们使用electron的时候，想要使用nodejs以及第三方的时候出现Uncaught ReferenceError: require is not defined，这种问题的时候，也许并不是我们的问题而是少了配置。也可能是版本的问题。 如图： 而我们只需要再加一个配置，这个错误提示就会消失， webPreferences: { nodeIntegration: true, contextIsolation:false // 把这一项加上错误就会消失 } 补充： nodeInteg
uniapp项目引入vant2遇到报错Uncaught ReferenceError: require is not defined完美解决方案
番茄Salad
02-19 1万+
【代码】uniapp项目引入vant2遇到报错Uncaught ReferenceError: require is not defined完美解决方案。
【已解决】Uncaught ReferenceError require is not defined
m0_54852350的博客
03-06 3947
当我们使用electron的时候，想要使用nodejs以及第三方的时候出现Uncaught ReferenceError: require is not defined，这种问题的时候，也许并不是我们的问题而是少了配置。也可能是版本的问题。 如图： 而我们只需要再加一个配置，这个错误提示就会消失， webPreferences: { nodeIntegration: true, contextIsolation:false // 把这一项加上错误就会消失 } 补充： nodeInteg
Vue - required is not defined - webpack
A_bad_horse的专栏
02-27 7194
代码如下： index.html main.js mathUtil.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia..
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
electron-vue-element-admin:一个可以在electron上跑的vue-element-admin最新版，会跟随更新
05-25
electron-vue-element-admin基于最新的Node，最新的vue-element-admin和最新的Electron，并且package.json中依赖的package都使用最新的版本，让完整版的vue-element-admin成功跑在Electron中。Workable electron-vue...
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
OrdosX#blog#electron-vue报错process-is-not-defined的解决方法1
07-25
首先打开.electron-vue/webpack.renderer.config.js，在大约第125行的new HtmlWebpackPlugin中任意位置
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 6740
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
ReferenceError: require is not defined 或 import error
qq_36208612的博客
11-08 2334
【代码】ReferenceError: require is not defined 或 import error。
Uncaught Referencerror: require is not defined
weixin_54138016的博客
06-14 903
在框架中使用是会报错的。例如如下代码：就会得到报错：那么在中，如何找到对应的方法呢？就可以使用或者方法了。为动态导入，构建时，会分离为独立的 chunk;而为直接引入。
vue3 引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
Hermia_yuan的博客
08-04 2169
如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。是一个 ESM 的原生功能，会暴露当前模块的 URL。如果项目是用vite搭建的,就需要使用。
解决浏览器 require is not defined 的报错问题
徐亦快的踩坑记录
10-10 3万+
那就让打包出来的代码别有require，换句话说，webpack应该打包出一个适用于ES6环境下的代码。在node环境中引入了一些包，用webpack打包后放在浏览器环境中，浏览器报错。是浏览器环境下的ESModule。ESModule不认识require。是node环境下的CommonJs，而require是node的一个私有的全局方法。
main.js:5 Uncaught ReferenceError: require is not defined
07-27
引用\[1\]中的错误信息表明在代码中使用了require函数，但是该函数在浏览器环境中是不可用的。require函数是Node.js中用于引入模块的函数，而浏览器中没有这个函数。所以在浏览器中使用require函数会导致"Uncaught ReferenceError: require is not defined"错误。 引用\[2\]中提到，在终端中运行"node app.js"时，控制台会输出"running server!"，这说明在Node.js环境中运行是正常的。但是在浏览器中运行时，会出现"Uncaught ReferenceError: require is not defined"错误。 引用\[3\]中的代码是一个Node.js的服务器代码，使用了require函数来引入http模块。这段代码只能在Node.js环境中运行，而不能在浏览器中运行。 根据以上信息，可以得出结论：在浏览器中使用require函数是不可行的，因为浏览器不支持该函数。如果你想在浏览器中运行代码，需要使用浏览器支持的方式来引入模块或者使用其他适合浏览器环境的方法来实现你的需求。 #### 引用[.reference_title] - *1* [electron-vue报错：(index):1 Uncaught ReferenceError: require is not defined at (index):1](https://blog.csdn.net/weixin_46205984/article/details/120172271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [运行node app.js 错误：Uncaught ReferenceError: require is not defined](https://blog.csdn.net/qq_38334677/article/details/125960437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值