electron 12版本以后渲染进程引入electron会报错

最新推荐文章于 2025-05-30 09:00:42 发布

原创

最新推荐文章于 2025-05-30 09:00:42 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #electron

Electron 12版本后，渲染进程直接引入electron会报错。官方提供了两种解决方案，一种是不推荐的通过设置配置以允许访问，另一种是推荐的使用预加载文件并开启上下文隔离。预加载脚本运行于渲染进程，可访问Node.js API，用于挂载安全的API。上下文隔离确保网页无法访问Electron内部组件和高权限API，自Electron 12起默认启用，推荐用于提升安全性。

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

electron 12版本以后渲染进程引入electron会报错

在这里插入图片描述

原因（from 官网）：

在这里插入图片描述

先上解决方案，容后解释。

方案一（官网不推荐）：

首先在创建窗口的地方加上以下配置

mainWindow = new BrowserWindow({
   
   
show: true,
width: 1024,
height: 728,
    webPreferences: {
   
   
        // 预加载脚本

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Scorpio11123

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

electron & vue & fs 文件读写问题

黄金蛋的博客

07-11

2036

文章目录问题问题 vue 是客户端，无法使用 fs 模块。解决办法：在 index.html 开头引入： window.fs = require('fs') console.log(window.fs) webPreferences: { preload: path.join(__dirname, "preload.js"), nodeIntegration: true, // 必须 webSecurity: false,

Electron中渲染进程require报错‘require is not defined’

404 Not Found.

07-02

3566

Electron中渲染进程require报错‘require is not defined’ 这是由于渲染进程(页面文件)中使用了第三方框架，如: jQuery等与node冲突造成的，主进程代码如下： function createWindow() { window = new BrowserWindow({ width: 950, height: 600,...

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

【保姆级超详细还免费】Electron 常见问题解答与技术实践指南

gitblog_01049的博客

05-30

258

Electron 常见问题解答与技术实践指南去发现同类优质开源项目:https://gitcode.com/ 前言 Electron 作为一款流行的跨平台桌面应用开发框架，开发者在使用过程中难免会遇到各种问题。本文针对 Electron 开发中的常见问题进行了系统梳理，并提供专业解决方案，帮助开发者快速定位和解决问题。安装问题排查网络问题导致的安装失败执行 npm install elec...

渲染进程使用electron报错：fs.existssync is not a function

wenyeqv的博客

03-06

3092

最近electron变成了12.0，在渲染进程中使用electron模块和electron-store模块出错，我的解决办法是首先将electron回退到上个版本：cnpm install electron@5.0.6, 然后在主进程中的主窗口设置： mainWindow = new BrowserWindow({ width:1440, height:765, webPreferences:{ nodeIntegrati

electron渲染进程报错

菜菜鸟的博客

06-02

6784

以一下为例： TypeError: fs.existsSync is not a function | import { ipcRenderer } from 'electron' 产生问题的原因： 1、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。 2、因为没有Node环境，所以require关键词是不可以使用的。弄清楚这个就一起解决问题吧：方案一：渲染进程 const { ipcRenderer } = window.require('e

在Electron中，渲染进程与主进程交互时，使用require报错

和合河禾何

09-06

1399

const osenv = require('osenv'); Uncaught ReferenceError: require is not defined 在渲染进程中使用osenv获取User目录的时候使用require导入osenv包的时候出错。修改为 import { osenv} from 'osenv';依然会报错。两种解决方案： 1、直接在html的scr...

Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信

04-10

此Demo 名字写错了，应该是 electronDemo ，呵呵。...解决 Electron 5之后默认没法在渲染进程引入模块报错提示 require is not defined 这样的问题。以及一些常用 Electron API 绑定事件的 Demo

解决 Electron 14 之后版本使用 remote 模块报错

你渴望力量吗？

03-23

2170

Electron使用remote模块报错

electron之主进程和渲染进程通信踩坑

qq_40942817的博客

01-24

872

踩坑原因：看文档的时候不仔细，忽略了注释，即下面红色框里面的文字说明实际需要的做法：需要通过上面这段代码引入你需要预加载的文件；如下图，官方的例子： ps：后面的方式才是正确的导出哦~ 留个代码给大家复制： const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('myAPI', { desktop: true }) 不知道有没有小伙伴遇到和我一样的问题，先记录一下。参考链接： htt

electron在渲染进程中引入ipcRenderer出现__dirname is not defined

weixin_43403746的博客

09-27

6058

背景：最近在学习electron，在根据官方文档学习“在线/离线事件的探测”这一章时，根据官方给出的代码在渲染进程引入ipcRenderer时出现报错。 ReferenceError: __dirname is not defined at eval (index.js?bdb9:4) at Object…/node_modules/electron/index.js (chunk-vendors.js:1256) at webpack_require (app.js:854) at fn (app.j

Electron渲染进程引入模块：Uncaught ReferenceError: require is not defined

小龙在线

07-16

884

参考官网https//www.electronjs.org/docs/latest/tutorial/context-isolation。原因是Electron的安全限制，可以给BrowserWindow配置上。

Electron 渲染进程，如何解决require is not defined的问题

二十春夏

02-04

985

记录一下最近在学习Electron遇到的问题 const mainWindow = new BrowserWindow({ width: 1050, height: 700, minWidth: 1050, minHeight: 700, webPreferences: { nodeIntegration: true, contextIsolation: false } }) // nodeIntegration: true, // nodeIntegration

electron-vue 本地文件读取与写入

Embrace924的博客

07-24

2236

electron-vue 本地文件读取与写入。

electron 引入页面时报错

weixin_38822843的博客

12-09

1722

Uncaught ReferenceError: require is not defined at index.js:1 index.html 文件中引入 index.js 以下为 index.js 文件 index.js 报错需要在创建的窗口中添加如下代码：具体使用查看第一张图 webPreferences: { webSecurity: false, // 取消跨域 nodeIntegration: true, // v5版本开始需要加多...

vue中electron与vue通信（fs.existsSync is not a function解决方案）

Mo_zifeng的博客

10-27

1687

dist/main.js (整个文件配置在另一条博客里)vue文件中。

Electron运行时报错：浏览器报错Uncaught ReferenceError: require is not defined

在下魔王ii的博客

07-20

4326

你可以检查Webpack配置文件中的`target`选项是否设置为`web`，以确保代码被打包为适用于浏览器的格式。另外，如果你正在使用Electron框架开发桌面应用程序，你可以在主进程中使用`require`语法，但在渲染进程中需要使用Electron提供的特殊语法来加载模块。解决这个问题的一种方法是使用Webpack等工具将你的代码打包成浏览器可执行的文件。这样可以将`require`语法转换为浏览器可识别的语法。2. 确保你的代码中没有在浏览器环境中使用了`require`关键字。

记electron-vue读取本地文件资源

Kilie_z的博客

03-26

1282

electron-vue读取本地

vue3 vite4 electron ipc 通信读取项目当中文件

pod_dragon的博客

08-02

1109

vue3 vite4 electron ipc 通信读取项目当中文件

VUE + electron 使用fs配置

LEON_RAY

09-01

707

②elementUI的icon丢失：customFileProtocol。①使用fs：configureWebpack。

electron_vue报错json中格式存在问题