仓库源文站点原文


title: 在Win10下交叉编译Electron项目 toc: true cover: 'https://img.paulzzh.com/touhou/random?73' date: 2020-11-08 20:49:52 categories: Electron tags: [Electron, 交叉编译]

description: 在上一篇文章中,我们使用Electron实现了免登录下载微博图片的应用;但是在文章最后进行交叉编译,打包发布时会有问题;本文针对这个问题给出了解决方案;

在上一篇文章手把手教你使用Electron开发新浪微博免登录图片下载器中,我们使用Electron实现了免登录下载微博图片的应用;

但是在文章最后进行交叉编译,打包发布时会有问题;本文针对这个问题给出了解决方案;

源代码:

<br/>

<!--more-->

在Win10下交叉编译Electron项目

前言

在开发Electron时,一个好处是可以使用开发Web的一切技术开发桌面端;

另一个好处就是可以接用Web的跨平台的好处,一套代码开发全平台的桌面端;

但是在进行Electron交叉编译至其他平台时,会出现各种问题;

本文总结了在win10下编译手把手教你使用Electron开发新浪微博免登录图片下载器项目至其他平台时遇到的问题;

<br/>

Linux交叉编译无法找到background.js

如果项目是根据vue-cli-plugin-electron-builder构建的,在项目中的入口文件默认是background.js

但是在编译至Linux/Mac平台时,会出现类似下面的问题:

Error: Application entry file "background.js" in the "/Users/xxx/Documents/npm/xxx-electron/vuecli/xxx/build/linux-unpacked/resources/app.asar" does not exist. 
Seems like a wrong configuration.

此时根据:

Issue#188-Application entry file "electron/bundled/background.js" in the "....app.asar" does not exist

的解决方案:

<font color="#f00">将`package.json`中的`"main": "background.js"`修改为:`"main": "dist_electron\bundled\background.js" `即可;</font>

这个解决方案对我有效!

<br/>

编译get请求timeout

在编译Linux/Mac平台代码时,会报错,类似于:

• cannot get, wait error=Get https://service.electron.build/find-build-agent?no-cache=1f42oro: dial tcp 51.15.76.176:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
attempt=0
waitTime=2
• cannot get, wait error=Get https://service.electron.build/find-build-agent?no-cache=1f42oro: dial tcp 51.15.76.176:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
attempt=1
waitTime=4
……
⨯ Get https://service.electron.build/find-build-agent?no-cache=1f42oro: dial tcp 51.15.76.176:443: connectex: A connection attempt failed because the connected party did not properly respond after a
period of time, or established connection failed because connected host has failed to respond.
⨯ C:\Users\mcw\AppData\Roaming\npm\node_modules\electron-builder\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE stackTrace=..

见下面的issue:

解决方案在issue中也提到了,就是:

<font color="#f00">**在Docker中运行一个[electron-build-service](https://github.com/electron-userland/electron-build-service)环境!**</font>

根据下面的步骤:

① 使用Docker拉取镜像electronuserland/builder

命令如下:

docker pull electronuserland/builder

② 创建容器和目录映射

假设你的Electron项目根目录在C:\MyAPP,则根据下面的命令创建目录映射:

docker run --rm -ti -v C:\MyApp\:/project -w /project electronuserland/builder

上面的命令会将C:\MyAPP映射至容器中的/project目录下;

注意:

--rm为两个减号,表示一个长flag;

-it为单个减号,表示-t -i的缩写;

这一点在上面的issue中作者写错了!

我在issue中已经指出来了!

③ 安装依赖并编译

执行上述命令后会创建一个容器,并进入交互状态;

随后执行下面的命令升级Electron项目的Yarn软件包,全局安装electron-builder:

cd /project
yarn upgrade
yarn global add electron-builder

最后执行下面的命令编译各个平台的代码:

编译完成后,由于创建了容器和实际目录的映射关系,所以编译结果也会在dist目录下;

更多编译选项,见Electron-builder CLI官方文档:

我们就完成了跨平台交叉编译!

<br/>

附录

vue-cli-plugin-electron-builder仓库地址:

源代码:

<br/>