怎样在银河麒麟利用体系上搭建 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即可

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

复制代码

将文件解压到/usr/sbin目次下，重定名成nodejs，加上软毗连即可。

1. tar -zxvf ./node-v18.19.0-linux-arm64.tar.gz  -C /usr/sbin  // 解压文件
3. cd /usr/sbin/
5. sudo mv node-v18.19.0-linux-arm64/ nodejs //相当于重命名
7. // 软连接，方便全局使用
9. sudo ln -s /usr/sbin/nodejs/bin/node /usr/sbin/
10. sudo ln -s /usr/sbin/nodejs/bin/npm /usr/sbin/

复制代码

查察版本，如果精确及设置乐成。

如果报错，查抄一下架构错了没。
3. 安装Electron 和 Electron-packager

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

1. sudo npm init

复制代码

不停敲回车即可，末了输入一个yes。Script下是个脚本，可以自己随意设置，调试的时间可以实验。

换源：

1. sudo npm config edit 

复制代码

加上上面的即可

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

复制代码

扫除一下之前的缓存：

1. sudo npm cache clean --force

复制代码

下载Electron和Electron-packager

1. sudo npm install --save-dev electron
2. sudo npm install electron-packager --save-dev

复制代码

此时你会发如今JSON文件多了你的上方两个软件的版本。
这里各人也可以直接换成我的，应该没啥区别，哈哈。但是如果版本差异记得要改版本号哦。

1. ​
2. {
3.   "name": "my-electron-app",
4.   "version": "1.0.0",
5.   "description": "Hello World!",
6.   "main": "main.js",
7.   "author": "Jane Doe",
8.   "license": "MIT",
9.   "scripts": {
10.     "start": "electron ."
11.   },
12.   "dependencies": {
13.     "electron": "^31.3.1"
14.   },
15.   "devDependencies": {
16.     "electron-packager": "^17.1.2"
17.   }
18. }
20. ​

复制代码

这里的main.js就是我们的主步调，由于作者相识过浅，我也不知道能不能包罗其他文件，这里就不瞎说了。
4. 打包步调为exe

这里各人去AI随意天生一个即可。

在Script中添加打包下令：

1. "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可实验步调

至此，大功告成。