Electron在Linux下打包那些事

目录

前言：

2.思路

3.打包步骤

4.我的配置（可参考我的配置） 

总结：

---

前言：

我是用的是electron-builder打包工具，要在linux下打包成amd64架构的APPimage文件，以及arm64架构的APPimage文件。

---

ps:

appimage是linux下的标准可执行文件，当然你也可以选择其他格式比如deb，但是我感觉还是APPimage比较好，我后续是要在基于linux系统的国产操作系统UOS(统信）下安装，只需要将APPimage文件打包为deb安装包即可。

至于为啥不直接打包deb,是因为就算我使用electron-builder打包成deb文件，但是因为目录结构等原因还是要重新打包，且APPimage几乎可以在任何基于linux系统的环境中运行，所以基于以上原因，我选择打包成APPimage

---

2.思路

第一点 ，我平时是在Windows系统下开发，要想打包成成linux amd64的APPimage文件，需要在linux环境下，于是我下载虚拟机（vmware）安装乌班图系统。

---

第二点，在linux下可以打包成arm64或者amd64架构的包,但要想运行arm64架构的APPimage包需要在arm架构的机器下，我使用的是苹果电脑，下载虚拟机，然后安装arm架构的系统，比如UOS的arm版本

---

3.打包步骤

其实打包就是修改electron-builder的配置文件，先说几个特别需要注意的，尤其是第一条。

---

1.在Linux下打包，package.json中必须配置homepage，就是主页信息，比如：https://www.baodu.com,如果报错说缺少author或者email，你就按我下面的写，我之前被狠狠狠的坑了一把，明明都写了email，author等信息还是一直报错说email没配置，原来是格式不对…

"author": "xxx, Inc "

---

2.可以用配置文件配置，也可以直接在package.json中写，我是在单独文件中配置的。比较重要的字段是target，意思是打包成的文件格式，还有一个是arch代表架构，amd64就写x64.

---

 

4.我的配置（可参考我的配置） 

---

第一个是新建electron-builder.yaml文件

appId: 'io.xx.xx'
productName: 'xx'
copyright: Copyright © 2021 xx
 
directories:
  buildResources: resources
  output: release/
  app: .
 
#artifactName: ${productName}-${version}-${platform}-${arch}.${ext}
asar: true
 
publish:
  - provider: 'generic'
    url: https://www.baidu.com
 
mac:
  artifactName: ${productName}-${version}-darwin-${arch}.${ext}
  target:
    - target: dmg
      arch:
        - x64
        - arm64
  icon: 'app/assets/xx.icns' //图片文件的路径
 
linux:
  artifactName: ${productName}-${version}-linux-amd64.${ext}
  target:
    - target: AppImage  //打包成什么类型的文件
      arch:
        - x64  // x64 == amd64 == x86_64
 
win:
  artifactName: ${productName}-${version}-windows-amd64.${ext}
  target:
    - target: nsis
      arch:
        - x64
  icon: 'app/assets/dwicologo.ico'
 
#publish:
#  - provider: generic
#    url: https://update.electron-builder.com
#    channel: latest
releaseInfo:
  releaseName: ${version}
  releaseNotes: 'view github release: https://github.com/yaklang/yakit/releases'

然后是pachage.json配置

{
  "name": "名称",
  "version": "版本",
  "description": "描述信息",
  "main": "app/main/index.js",//主程序
  "homepage": "主页",
  "author": "xx, Inc ",
  
  
  "scripts": {
    "start-electron": "electron .",
    "install-render": "cd app/renderer/src/main && yarn install",
    "start-render": "cd app/renderer/src/main && yarn electron-render",
    "build-render": "cd app/renderer/src/main && yarn build",
    "dev": "concurrently -k \"yarn start-render\" \"wait-on tcp:3000 && yarn start-electron \" ",
    "postinstall": "electron-builder install-app-deps",
    "pack-win": "electron-builder build --win --x64",
    "pack-mac": "electron-builder build --mac --x64",
    "pack-mac-arm64": "electron-builder build --mac --arm64",
    "pack-linux": "electron-builder build --linux --armv7l",
    "electron-publish": "electron-builder --publish always -mwl"
  },
  "keywords": [],
  "license": "ISC",
 
 
}

---

总结：

这篇文章主要讲的是，electron使用electron-builder是如何打包的，我们可以通过修改electron-builder.yaml配置文件和package的script配置进行打包，需要注意的是，Windows下无法打linux版本的包，如果你要打linux系统的amd64架构需要找一台linux amd64的系统打包，也可以在amd64下打arm架构的包，但是不能运行，需要放到arm架构的系统里才能运行。