使用electron中遇到的问题总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用electron中遇到的问题总结相关的知识,希望对你有一定的参考价值。

参考技术A

学习electron还没有太久,在项目上进一步接触打包和自动更新后也踩了好多坑,百度了很多的资料,我这里对遇到的问题整理一下,避免后续想学习electron的同学再次踩坑。

参考: 问题解决的参考文档

不同的页面引入报不一样的错,如下:
renderer进程引入electron (app.vue):

错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的
renderer进程引入electron (index.html页面):

百度查资料得知原因是:
(1)、首先在渲染进程属于浏览器端,没有集成Node的环境,所以类似 fs 这样的Node的基础包是不可以使用。
(2)、因为没有Node环境,所以这种属于node api的require关键词是不可以使用的。
(3)、electron5.x的node集成环境默认是关闭的,这之前的版本是默认开启的

根据百度提供的方案是在主进程中集成 Nodejs,也就是添加配置nodeIntegration: true
通过使用window.require代替require来引入electron,因为前者不会被webpack编译,在渲染进程require关键字就是表示node模块的系统
渲染进程:

主进程main.js:

配置好重新启动前端工程会之前的错误没有了,但是出现 window.require is not a function .错误

由此看出直接使用window.require代替require是不可行的,接着百度查找资料,找到一种解决方案:

2.1新建preload.js预处理文件

2.2在main进程中添加preload配置项,使用了预加载之后,即使nodeIntegration为false,也可以使用Node API访问到ipcRenderer

2.3 渲染进程种引入electron中的ipcRenderer

把以上三个步骤引入之后重启前端工程,又发现报错

不用担心,这个其实是因为工程是在本地浏览器运行的,识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。我们一般开发都是在本地浏览器调试,有红色报错提示的话看着还是比较碍眼,所以添加一个 is-electron来判断,处于electron环境中才执行
npm install --save is-electron

在 Electron + React 中使用静态资源

【中文标题】在 Electron + React 中使用静态资源【英文标题】:Using Static Assets in Elecron + React 【发布时间】:2022-01-11 09:28:39 【问题描述】:

我是 Electron 新手,尝试在 Electron + React 应用程序中做一些简单的事情时遇到了一些麻烦。我要做的就是:从 React 组件加载位于我的src/assets 目录中的 3D 模型 (.glb)。我使用this 指南创建了项目。在一个典型的 React 项目中,我可以直接在我的 JS 模块中导入文件并在我的代码中引用路径。但是,使用默认的 Webpack 配置,找不到该文件。在加载资源时,我对 React + Webpack 如何工作的理解显然存在差距。我错过了什么?非常感谢任何帮助。

谢谢!

【问题讨论】:

【参考方案1】:

事实证明,Webpack 文档清楚地说明了答案。谁知道?我为旧版本的 Webpack 找到了很多类似的问题/答案,因此我将在此处发布一个针对 Webpack 5 的问题。它需要在 webpack.rules.js 文件中添加一个简单的两行内容:


    test: /\.(png|jpg|gif|svg|glb)$/,
    type: 'asset/resource'

关键是asset/resource 行。它是 Webpack 5 的新功能,允许捆绑资产而不需要任何额外的加载器。这样,资产可以作为 Javascript 模块包含在内,而 Webpack 将负责其余的工作。

所以,可以这样做:

import modelSrc from "../assets/some_awesome_model.glb";

就是这样。 Webpack 会输出一个 URL,例如 /9feee593dc369764dd8c.glb,这意味着 Webpack 已经定位并处理了资产。

【讨论】:

以上是关于使用electron中遇到的问题总结的主要内容,如果未能解决你的问题,请参考以下文章

关于 electron-builder 打包遇到的一点点问题

关于 electron-builder 打包遇到的一点点问题

关于 electron-builder 打包遇到的一点点问题

我在使用带有电子的 vue js 进行捆绑时遇到问题

解决Electron使用透明窗口无效

electron-vue在使用element-ui时部分组件无法显示问题