Electron在windows下打linux包

在原来打包windows包的配置的基础上做一些改动即可
参考我之前的博客 Vue cli 3.x使用electron打包配置

1. 修改package.json配置,下面三个字段必填,且author要按照下面格式填写

{
	"license": "aaa",               // 根据实际情况填写
  	"author": "作者名 <邮箱地址>",   // 如 "张三 <[email protected]>"
  	"homepage": "",                 // 可以填写网址,如公司官网网址或者app对应网页的地址等
}

scripts中添加electron打包linux环境的命令

"scripts": {
	// 可选 --x64 --ia32 --arm64 --armv7l等
    "electron:linux": "vue-cli-service electron:build -l --x64",  // 打包linux下amd64位的包
    "electron:arm": "vue-cli-service electron:build -l --arm64"   // 打包linux下arm64位的包
  },

2. 在vue.config.js中的electron-builder的配置下增加linux的配置,linux下默认打的是AppImage包和snap包,可以通过target字段修改

pluginOptions: {
    electronBuilder: {
      builderOptions: {
       	...
        linux: {
          icon: './public/app.png',    // 注意linux下图片的尺寸最好是256*256
       //  target: 'deb',              // 这个字段也可以是数组格式,具体可以参考electron-builder官网
        },
        ...
      }
    }
  }

3. 以前是可以直接在windows下打linux包的,但是现在根据官方文档说明,原来支持打包的服务已经停用了,所以windows下我们需要借助虚拟机来实现打包(条件允许的打包什么样的版本的包可以直接在对应的linux系统上进行打包)

打包步骤:
  • 安装docker Docker下载地址
  • 安装后启动 docker desktop,可能会报错提示需要更新到WSL2,安装过程中会出现失败等情况,可以参考 Win10家庭版 通过Hyper-V(WSL2)安装Docker-Desktop 失败
  • 启动成功后,win + r 输入cmd打开终端
  • 输入 docker pull electronuserland/builder
  • 输入 docker run --rm -ti -v C:\project\vue:/project -w /project electronuserland/builder
    这行命令表示把windows系统下的项目映射到虚拟机的某个虚拟文件夹下
    (其中C:\project\vue\ 为要映射的原项目文件地址,最后一个斜杠不要忘哦!! 其中的两个/project表示映射后项目所放置的文件夹名称,可以根据自己的习惯进行修改)
  • 映射成功,进入linux命令行后,重新装包 npm install
  • 装包过程中可能会出现安装electron包很慢的情况,可以修改npm、electron、electron-builder-binaries的安装镜像源

修改npm的下载镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org

按照下面命令修改electron镜像,electron-builder-binaries是后面打包过程中需要用到的,可以提前修改镜像

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set electron-builder-binaries_mirror_mirror https://npm.taobao.org/mirrors/electron-builder-binaries_mirror/

electron的某些版本在淘宝镜像中可能找不到,也可以用华为云这个镜像安装

npm config set electron_mirror https://mirrors.huaweicloud.com/electron/
npm config set electron-builder-binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/
  • 装包成功后,执行打包命令时,可能报错需要npm rebuid node-sass,按照报错提示执行npm rebuid node-sass即可
  • 执行完毕后,继续打包,打包完成后dist-electron则会出现对应的安装包

4. 安装包的升级,electron官网中有提过autoUpdater是不支持linux的自动升级的,需要通过发行版包管理器来实现升级

因为我们做的是政府项目,所以发行版包管理器不好搭建
自动升级检测时,amd下需要latest-linux.yml配置文件,arm下需要latest-linux-arm64.yml(根据系统实际的位数变化)配置文件

  1. 打包deb安装包时,即使配置了publish,无法打包出latest-linux.yml文件
  2. 在不修改linux下的target配置时,打包amd64的包时,默认情况下会同时打包AppImage和snap两种格式的包,并且会产生latest-linux.yml文件,并且按照windows的自动更新方式上传新的latest-linux.yml和安装包到服务器,通过autoUpdater是可以实现自动检测更新的
  3. 打包arm64的包时,在打包snap包时会报错,提示需要sudo snap install snapcraft --classic 但是安装这个很难成功(目前我还没成功,即使我在arm64的虚拟系统上打包也会有这个报错),当然这个报错不会影响AppImage打包,在dist-electron中可以看到AppImage包,但是这个报错会让我们得不到latest-linux-arm64文件,所以建议大家这个时候可以修改下target:"AppImage"后即可成功打包出latest-linux-arm64文件了,同样也可以使用autoUpdater进行更新了

针对无法使用自动升级的deb包,我采用的是当有新的安装包时,提示用户去下载安装更新,在系统中提供下载最新安装包的位置,让用户手动进行下载安装更新

5.打包出来的AppImage安装包在实际安装过程中会出现问题

  1. amd下安装AppImage包运行时报错
/tmp/.mount_综合tnTpHu/chrome-sandbox is owned by root and has mode 4755.

解决方案:
1、终端运行时添加免沙箱命令–no-sandbox,但是该种方案在自动升级时会无法自动打开应用程序,只能将AppImage旧版本安装包所在的路径下的安装包替换为新版本的安装包,然后重新通过命令行的方式打开
2、启用用户命名空间:sudo sysctl kernel.unprivileged_userns_clone=1,但每次开机都要运行该命令
3、给报错信息中的文件授权:sudo chown root /chrome-sandbox && sudo chmod 4755 /chrome-sandbox,这个方法不适用于picgo,因为这个chrome-sandbox文件会被自动删除,(我不太清楚electron打包出来的是不是picgo,但是我确实没有找到这个路径下的sandbox文件)
4、开机时自启动用户名称空间:root下运行echo ‘kernel.unprivileged_userns_clone=1’ >
/etc/sysctl.d/userns.conf命令即可

  1. arm下安装的时候报错
error while loading shared libraries: libz.so: cannot open shared object file: No such file or directory.

解决方案:

  • 使用apt-file search查找
    sudo apt-get install apt-file
  • 安装成功使用apt-file时一般会提示更新
    sudo apt-file update
  • 查找libz.so所在的库或所在的包
    apt-file search libz.so
  • 运行命令显示如下:
libzadc-dev: /usr/lib/arrch64-linux-gnu/genwqe/libz.so
zlib1g-dev: /usr/lib/arrch64-linux-gnu/libz.so
...

右边是匹配你缺失的库的,左边是查到的库所在的包,当发现匹配到多个包时,按顺序安装尝试即可(我安装了第一个就可以了)

  • 安装缺失包:
    sudo apt-get install libzadc-dev
  • 可以正常运行包

最后给大家提些小小的帮助,因为对linux不是很熟悉而浪费时间的地方(当然大佬可以无视)
linux下安装deb包成功,但是点击打开运行时毫无反应,由于本人不知道怎么查看运行终端查看报错日志,于是反复打包了很多次依然无果,

  1. 查看方式,打开deb安装包安装成功后的文件夹,下面有一个跟你打包时在package.json中的写的name同名的可执行程序,在当前文件夹下打开终端,拖动该可执行程序到终端中运行,即可以查看到运行日志
  2. 运行时报错cannot find module fs/promise 这种错误是因为包的版本不对,我把electron-updater的版本固定到4.3.5就可以成功运行了

你可能感兴趣的:(electron,windows,linux)