首页 > 分享 > windows环境下electron开发遇到的各种坑汇总

windows环境下electron开发遇到的各种坑汇总

花匠小妙招
2024-12-03 16:01

进行electron开发要经常参考github上的优秀代码，亦或者需要使用npm、cnpm、yarn这些包管理工具来管理项目，在开发过程中会有很多坑需要填，这篇博客就综合记录下这些知识点

1、github速度慢的解决方法

首先，在www.ipaddress.com中查看github.com以及github.global.ssl.fastly.net映射地址。
然后，在hosts中进行对应的配置，这里根据当前的映射地址进行配置，需要注意的是这个映射地址经常都在变，当发现速度变慢后，建议再次更新地址。
最后，执行ipconfig/flushdns刷新dns，如果不行的话，就重启。

140.82.114.4 github.com 199.232.69.194 github.global.ssl.fastly.net 12

配置后，使用ping github.com后应该能明显看到速度变快

2、npm、cnpm以及yarn包管理工具的配置

这里就不介绍怎么安装了，需要说明的是由于国内网络问题，npm下载速度很慢可以通过配置淘宝镜像来管理包工具，cnpm以及yarn都是可以配置成淘宝镜像的，以下以cnpm为例来说明，yarn也是一样的配置。

cnpm config set registry https://registry.npm.taobao.org cnpm config set disturl https://npm.taobao.org/dist 12 3、electron 开发遇到的坑

在electron桌面开发中遇到很多坑，这里一一总结下

坑1： electron桌面无法使用react-devtools
在具体package.json中使用electron-devtools-installer来管理devtools，但是当配置electron为9.xx版本后，无法正常的显示react-devtools，这个对于使用reactjs来进行桌面应用开发是相当痛苦的，经过各种尝试，发现以下配置是能够正常加载出react-devtools的

"electron-devtools-installer": "^2.2.4"， "electron": "^8.0.1", "react-dom": "^16.3.1", "react": "^16.3.1", 1234

坑2：ajax网络访问提示NET::ERR_CERT_AUTHORITY_INVALID
这种情况实际上表示当前访问的网络是不安全，没有对应的证书，客户端解决的办法可以参考electron私有部署webview加载不安全的https网址，我通过添加如下代码解决问题

app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') 1

坑3：yarn install时候一直提示electron waiting
这个可以参考安装Electron的时候,卡住问题，我是用的yarn来管理package，所以实在.yarnrc文件中进行对应的配置

electron_mirror="https://npm.taobao.org/mirrors/electron/"（填上这句话即可） 1

坑4：ffi-napi在typescript中使用提示No native build was found
这个坑太大了，我是基于github上的tagspaces项目来修改的，由于项目需要调用c/c++的dll所以考虑采用ffi-napi来调用dll(ffi已经out了)，但是在编译过程中一直都报以下错误

renderer.dev.js:113102 Uncaught Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=76 uv=1 libc=glibc at Function.module.exports../node_modules/node-gyp-build/index.js.load.path (renderer.dev.js:113102) at load (renderer.dev.js:113067) at Object../node_modules/ref-napi/lib/ref.js (renderer.dev.js:184979) at __webpack_require__ (renderer.dev.js:771) at fn (renderer.dev.js:131) at Object../node_modules/ffi-napi/lib/ffi.js (renderer.dev.js:89883) at __webpack_require__ (renderer.dev.js:771) at fn (renderer.dev.js:131) at Module.<anonymous> (renderer.dev.js:26630) at Module../app/services/webdav-io.ts (renderer.dev.js:27293) 1234567891011

一开始以为是node版本问题，后面发现electron项目中国electron版本不一样对应的node版本会自动调整，所以不是本地node版本问题。花了几天时间来解决这个问题，最后在一边文章中看到希望，No native build was found in electron #725 ，这篇文章最后有提到
electron-leveldown-pouchdb-webpack，这里提到通过webpack.config.js中添加下插件

const webpack = require("webpack"); { ... plugins: [new webpack.ExternalsPlugin("commonjs", ["leveldown"])] } 12345

由于报错的的是ffi-napi模块，所以进行对应的修改

const webpack = require("webpack"); { ... plugins: [new webpack.ExternalsPlugin("commonjs", ["ffi-napi"])] } 12345

再次编译问题解决

坑5、ChunkLoadError: Loading chunk 11 failed问题
在生产环境中报如下错误

react-dom.production.min.js:209 ChunkLoadError: Loading chunk 11 failed. (error: file:///D:/code/safebox/app/dist/11.renderer.prod.js) at Function.o.e (file:///D:/my/safebox/resources/app/dist/renderer.prod.js:1:723) 123

这个在webpack的生产环境配置中output.publicPath位置没找对引起的，我这边是需要根据安装路径来动态决定，所以在entry对应的启动页中添加如下代码

__webpack_public_path__ = path 1

这里的path对应你的动态路径，问题完美解决