正文

electron踩坑记录(代码片段)

xueyubao  xueyubao  2022-12-11  404

关键词：

心血来潮想做一个PC端应用，就来学学Electron，以下为学习Electron时的踩坑记录。

安装

在国内安装electron的时候，可能会因为网络原因遇到卡在Building fresh packages...（yarn）或者是卡在node install.js（npm）这一步上。

在项目的根目录下创建.yarnrc或.npmrc然后输入如下内容更改各依赖的源，即可解决该问题。

registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

C++包rebuild

使用electron就避不开要使用一些第三方的C++包，使用这些包的时候需要根据node和electron的版本重新编译。

手动rebuild

手动编译要根据electron的版本设置target，然后再根据node的版本设置对应的abi值，（详见对应表）

$ npm rebuild --runtime=electron --target=6.0.12 --disturl=https://atom.io/download/atom-shell --abi=72

使用electron-rebuild

yarn add electron-rebuild -D # or npm install electron-rebuild --save-dev

下载后使用npx electron-rebuild即可重新编译，有时候会因为网络原因构建时下载依赖失败，因此可以通过-d=http://npm.taobao.org/mirrors/atom-shell切换为淘宝镜像（好久没更新了）

注意：Windows环境下安装electron-rebuild需要先安装windows-build-tools

打包

electron常用的打包工具有两个electron-builder和electron-forge，我使用的是社区活跃度较高的electron-builder，electron打包时会下载一些必要的依赖，因此和安装依赖、rebuild具有同样的问题——网络问题，因此需要更改下载地址，从淘宝镜像下载

ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/

不过我改完镜像打包依然是显示网络超时，因此我选择了手动添加nsis和winCodeSign

从淘宝镜像中分别下载所需要版本的nsis和winCodeSign，解压后将nsis的整个文件夹放到C:UsersadminAppDataLocalelectron-builderCache sis中，将winCodeSign的整个文件夹放到C:UsersadminAppDataLocalelectron-builderCachewinCodeSign中，即可成功打包。

白屏问题

简单解决

在ready-to-show的时候再显示
设置窗口底色

win = new BrowerWindow(
    width: 600,
    height: 300,
    webPreferences: 
        nodeIntegration: true
    ,
    show: false,
    background: ‘#2e2c29‘,
);

win.on(‘ready-to-show‘, () => 
    win.show();
);

使用占位图

https://github.com/dengyaolong/electron-loading-window-example

electron-vue项目打包踩坑记录(代码片段)

配置"build":"productName":"xxxx",//项目名这也是生成的exe文件的前缀名"appId":"com.leon.xxxxx",//包名"copyright":"xxxx",//版权信息"directories"://输出文件夹"output":"build","nsis":"oneClick":false,//是否一键安装"allowElevation":true,//允许请求提升。如果为fal... 查看详情

django踩坑记录3(代码片段)

路径如下：admin.py的代码：fromdjango.contribimportadminfromsign.modelsimportEvent,Guest#Registeryourmodelshere.classEventAdmin(admin.ModelAdmin):list_display=[‘id‘,‘name‘,‘status‘,‘address‘,‘start_time‘]classG 查看详情

gitlab踩坑记录(代码片段)

基于docker安装gitlabgitlab:image:gitlab/gitlab-cerestart:alwayshostname:‘81.70.22.100‘environment:GITLAB_OMNIBUS_CONFIG:|external_url‘http://81.70.22.100:8443‘nginx[‘redirect_http_to_https‘]=falseletsencr 查看详情

vue+ts+electron踩坑记录

...了自己做一个工具的想法。想做一个跨平台的桌面应用，electron是个不错的选择，于是开始了我的踩坑之旅。有了vue-cli脚手架在，搭建vue+TS的初始环境非常简单，运行后把语言选上typescript就行。初始化完成后，会生成一个模板... 查看详情

vue+element踩坑记录(代码片段)

Vue+Element踩坑 1.获取后台返回的数据，是个数组，循环后展示出来<el-table-column:label="$t(‘common.cardModel.guz‘)"sortable="custom"prop="assetNo"><templateslot-scope="scope"><divv-for="(item,index)inscope. 查看详情

pyqt5安装踩坑记录(代码片段)

pyqt5安装踩坑记录😶(ˉ▽ˉ；)…😶文章目录pyqt5安装踩坑记录先是参考了这篇文章:https://www.cnblogs.com/syh6324/p/9484208.html，使用了：pipinstallPyQt5-tools然后报错：ERROR:pip'sdependencyresolverd 查看详情

vue3electron记录(代码片段)

vue3+electron打包成桌面应用自己记录,vue3+electron打包成.exe桌面应用,部分代码也是c来的,自己修改了一番,也算整合记录自己开发中的心得文章目录vue3+electron打包成桌面应用前言一、vuecli打包之后修改公共请求地址二、封装... 查看详情

jenkinspipeline的语法实例介绍及踩坑记录(代码片段)

本文介绍一下Jenkinspipeline的语法实例介绍及踩坑记录废话不多说，直接上案例pipelineagentanystagesstage(‘download‘)stepsecho‘Thisisabuildstep‘gitcredentialsId:‘0c3d0852-8a03-42e2-a893-a445308a257b‘,url:‘http://192.168.0.6/softwa 查看详情

canvas踩坑记录(代码片段)

一、绘制一个带有多张图片和文字的canvas。要求将一张矩形的图片，放置进去显示为圆角矩形的图片　　解决方案，先把图片处理成圆角矩形的样子，再放进去就可以了　　绘制圆角矩形图片的解决方案<imgsrc="http://pics.sc.chinaz... 查看详情

华为云kafkapoc踩坑记录(代码片段)

2019/03/0818:29最近在进行华为云相关POC验证，个人主要负责华为云DMSkafka相关。大致数据流程是，从DIS取出数据，进行解析处理，然后放入kafka，再从kafka中取出数据然后放到ElasticSearch以及OBS里面。kafka作为中间层次，发挥着中间件... 查看详情

pyltp安装踩坑记录(代码片段)

LTP（LanguageTechnologyPlatform）由哈工大社会计算与信息检索研究中心开发，提供包括中文分词、词性标注、命名实体识别、依存句法分析、语义角色标注等丰富、高效、精准的自然语言处理技术。LTP的源码是C++，也提供Java和Python版... 查看详情

scrapy爬虫踩坑记录(代码片段)

Scrapy作为一个优秀的爬虫框架，尽管其体系已相当成熟，但实际操作中其实还是需要借助其他插件的力量来完成某些网站的爬取工作，今天记录一下博主爬虫路上的一些坑及解决方案，避免大家走太多弯路。一、D... 查看详情

（webflux）004webfilter踩坑记录(代码片段)

一、背景使用SpringWebFlux的WebFilter时，由于不熟悉或一些思考疏忽，容易出现未知的异常。记录一下排查与解决方案，给大家分享一下。二、问题2.1问题描述在测试接口方法时，出现的错误信息如下（对一些项... 查看详情

electron开发记录：visualstudiocode相关(代码片段)

...vscode来开发应用的主要内容:1.vscode的安装2.使用vscode运行electron的demo3.安装typings开启智能提示功能4.vs的快捷键和其他设置1.VSCode安装VSCode的安装比较简单，去官网https://code.visualstudio.com下载deb包，然后$sudod 查看详情

fastlane一键打包/发布app-使用记录及踩坑(代码片段)

最近有空,搞一搞fastlane一键打包发布Appstore/testflight/fir.com相关资料安装fastlanebrewinstallfastlanefastlane的安装和使用Fastlane官方文档fastlane自动化打包(android)fastlane-fastfile一些基础idea使用vscode,可以安装一些代码片段插件,快速上手如何... 查看详情

安装cpu版本gluonts过程记录踩坑(代码片段)

Anaconda新建一个干净的虚拟环境#删除指定虚拟环境condaremove-nGluonTS--allcondacreate-nGluonTSpython=3.7condaactivateGluonTS个人在安装过程中发现，最好不要用国内源装mxnet、gluonts，老容易出问题，版本不兼容什么的。pipinstallmxne... 查看详情

kaldi语音识别工具编译问题记录(踩坑记录)(代码片段)

✨博客主页：小小马车夫的主页文章目录前言1、cuda2、openfst3、SIRLM4、Kaldi需要升级gcc到5.0及以上总结前言最近由于项目需要要研究下ASR语言识别，用到了Kaldi语音识别工具，Kaldi是一个语音识别的工具箱，由C+&#... 查看详情

jdk8升级jdk11踩坑记录1(代码片段)

今天想将项目的jdk版本从8升级到11，maven编译时遇到了下面的问题错误日志[ERROR]Failedtoexecutegoalorg.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile(default-compile)onprojectmyadmin:Fatalerrorcompiling:java.lang.ExceptionI 查看详情