windows环境下electron开发遇到的各种坑汇总
进行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
配置后,使用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
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",
坑2:ajax网络访问提示NET::ERR_CERT_AUTHORITY_INVALID
这种情况实际上表示当前访问的网络是不安全,没有对应的证书,客户端解决的办法可以参考electron私有部署webview加载不安全的https网址,我通过添加如下代码解决问题
app.commandLine.appendSwitch('--ignore-certificate-errors', 'true')
坑3:yarn install时候 一直提示electron waiting
这个可以参考安装Electron的时候,卡住问题 ,我是用的yarn来管理package,所以实在.yarnrc文件中进行对应的配置
electron_mirror="https://npm.taobao.org/mirrors/electron/"(填上这句话即可)
坑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)
一开始以为是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"])]
}
由于报错的的是ffi-napi模块,所以进行对应的修改
const webpack = require("webpack");
{
...
plugins: [new webpack.ExternalsPlugin("commonjs", ["ffi-napi"])]
}
再次编译问题解决
坑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)
这个在webpack的生产环境配置中output.publicPath位置没找对引起的,我这边是需要根据安装路径来动态决定,所以在entry对应的启动页中添加如下代码
__webpack_public_path__ = path
这里的path对应你的动态路径,问题完美解决
更多推荐
所有评论(0)