Electron在windows下打linux包

admin 管理员组

文章数量: 887006

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

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

{
	"license": "aaa",               // 根据实际情况填写
  	"author": "作者名 <邮箱地址>",   // 如 "张三 <1111@qq>"
  	"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 <path_to_marktext_dir>/chrome-sandbox && sudo chmod 4755 <path_to_marktext_dir>/chrome-sandbox，这个方法不适用于picgo，因为这个chrome-sandbox文件会被自动删除，（我不太清楚electron打包出来的是不是picgo，但是我确实没有找到这个路径下的sandbox文件）
4、开机时自启动用户名称空间：root下运行echo ‘kernel.unprivileged_userns_clone=1’ >
/etc/sysctl.d/userns.conf命令即可

2. 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