如何在银河麒麟操作系统上搭建 Electron （含 Electron 打包指南）

本次教程所用版本

Eletron版本：31.3.1

Electron-packager版本：17.1.2

VScode版本：1.92.0

Node版本：18.19.0

npm版本：10.2.3

前言：

随着跨平台应用开发的需求日益增长，Electron 和 Qt 成为了两种广受欢迎的选择。Electron 以其简单易用、快速开发的特点吸引了众多前端开发者，而 Qt 则因其强大的图形界面支持和高效的性能表现受到了许多专业软件开发者的青睐。银河麒麟操作系统作为一款基于 Linux 的国产操作系统，其安全稳定的特点使得它成为了政府机构和企业用户的优选。

1. 下载VScode

官网地址：Visual Studio Code - Code Editing. Redefined

下载完成后安装即可，过程不再演示。

打开终端：

进入到/home下，并创建Eletron文件夹。用于后续的项目创建。（作者喜欢在ROOT用户下操作，更加方便快捷，但是同时也更加危险，推荐大家用普通用户就好，在mkdir 前加 sudo即可）

Vscode打开文件夹

点击Yes，获取权限。

2. 下载Node

在Vscode中打开终端，或者使用普通终端即可，这里都一样。

下载源码包：注意这里请注意架构，作者时x64，如果是arm就把x64改成arm64即可

wget https://nodejs.org/download/release/v18.19.0/node-v18.19.0-linux-x64.tar.gz

将文件解压到/usr/sbin目录下，重命名成nodejs，加上软连接即可。

tar -zxvf ./node-v18.19.0-linux-arm64.tar.gz  -C /usr/sbin  // 解压文件
 
cd /usr/sbin/

sudo mv node-v18.19.0-linux-arm64/ nodejs //相当于重命名

// 软连接，方便全局使用

sudo ln -s /usr/sbin/nodejs/bin/node /usr/sbin/
sudo ln -s /usr/sbin/nodejs/bin/npm /usr/sbin/

查看版本，如果正确及配置成功。

如果报错，检查一下架构错了没。

3. 安装Electron 和 Electron-packager

在换源之前我们需要先初始化一下项目，也就是生成一下JSON文件。

sudo npm init

一直敲回车即可，最后输入一个yes。Script下是个脚本，可以自己随意设置，调试的时候可以执行。

换源：

sudo npm config edit 

加上上面的即可

electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
registry=https://registry.npmmirror.com
strict-ssl=false

清除一下之前的缓存：

sudo npm cache clean --force

下载Electron和Electron-packager

sudo npm install --save-dev electron
sudo npm install electron-packager --save-dev

此时你会发现在JSON文件多了你的上方两个软件的版本。

这里大家也可以直接换成我的，应该没啥区别，哈哈。但是如果版本不同记得要改版本号哦。

​
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^31.3.1"
  },
  "devDependencies": {
    "electron-packager": "^17.1.2"
  }
}

​

这里的main.js就是我们的主程序，因为作者了解过浅，我也不知道能不能包含其他文件，这里就不瞎说了。

4. 打包程序为exe

这里大家去AI随意生成一个即可。

在Script中添加打包命令：

"package-mac": "electron-packager . Path --platform=linux --arch=x64 --electron-version=31.3.1 --mirror=https://npm.taobao.org/mirrors/electron/ --out=dist

选项详解

• .：这表示你的项目的根目录，即包含 package.json 文件的目录。
• Path：这是打包后应用程序的名称。
• --platform=linux：指定目标平台为 Linux。
• --arch=x64：指定目标架构为 64 位。
• --electron-version=31.3.1：指定 Electron 的版本为 31.3.1。
• --mirror=https://npm.taobao.org/mirrors/electron/：指定 Electron 的镜像源，这里使用了 Taobao 镜像，不然会超时。
• --out=dist：指定输出目录为 dist，打包好的应用程序将被放置在这个目录下。

点击script上方的Debug

点击即可，这里需要切换的root用户。

这里会有一个dist目录，其中会有一个Path可执行程序

至此，大功告成。