開發(fā)electron最大的特點就是可以使用web技術(shù)來開發(fā)跨平臺應(yīng)用，大部分開發(fā)都是在windows/mac上開發(fā)的electron應(yīng)用，我使用的是electorn-builder來構(gòu)建應(yīng)用，官網(wǎng)提供支持在windows上使用docker來實現(xiàn)Linux版本的構(gòu)建?？梢灾苯釉贚inux服務(wù)器上完成構(gòu)建：

構(gòu)建Linux環(huán)境的electron主要的步驟：

1. 安裝依賴：node、python(如需要)
2. 將源代碼上傳到Linux環(huán)境
3. 構(gòu)建應(yīng)用

安裝步驟：

一、安裝node

在Linux上安裝nodejs，可以在windows上先下載把Linux版本的nodejs包下載到本地后，再拷貝到Linux上

1、查看Linux系統(tǒng)架構(gòu)

uname -m | arch

2、下載nodejs，Linux安裝包下載：nodejs

3、下載到本地之后，將nodejs壓縮包上傳到Linux服務(wù)器上，可以使用終端工具或者ssh傳輸MobaXTerm終端工具下載地址

將壓縮包上傳到服務(wù)器目錄，一般是用戶目錄（/home/username）

~代表用戶目錄

4、將文件解壓到指定nodejs的安裝目錄，這里安裝到了/opt目錄下

1. 在/opt下創(chuàng)建nodejs目錄

   cd /opt

   mkdir nodejs

2. 將壓縮包拷貝到/opt/nodejs目錄下

   mv ~/node-v16.20.2-linux-x64.tar.xz /opt/nodejs

3. 切換到/opt/nodejs目錄下，解壓壓縮包

   cd /opt/nodejs/

   tar -xvf node-v16.20.2-linux-x64.tar.xz

4. 記住解壓的bin目錄，后續(xù)設(shè)置環(huán)境變量

   目錄：/opt/nodejs/node-v16.20.2-linux-x64/bin

5、使用vi或者vim命令編輯 /etc/profile 文件，將nodejs的bin目錄添加到環(huán)境變量中

export PATH=“/opt/nodejs/node-v16.20.2-linux-x64/bin:$PATH”

1. vim /etc/profile

2. 按下鍵盤的 i 即可編輯文件，在文件末尾添加環(huán)境變量，如下：

   

3. 設(shè)置完畢后，按下 esc 鍵退出編輯模式，輸入 :wq! 保存編輯并退出

4. 修改了環(huán)境變量文件之后，需要重新加載配置文件以生效，使用命令 source /etc/profile

5. 輸入 node -v 測試是否安裝成功

二、安裝python

我的程序用到grpc，涉及到了node與c++的調(diào)用，為了包之間的適配，需要借用python環(huán)境來重新構(gòu)建依賴以完成grpc與electron的適配

1、將python3.11.5在windows上下載后，上傳到Linux

安裝步驟：

1. cd python-3.11.5

2. ./configure --preofx=/opt/python3

3. make j 10 ：同時運行十個作業(yè)，若失敗的話，可以使用make

4. su

5. make install

2、將 python3 目錄下的 bin 目錄設(shè)置環(huán)境變量

1. vim /etc/profile
2. export PATH=$PATH:/opt/python3/bin
3. 設(shè)置完成保存后，重新運行配置文件：source /etc/profile

三、構(gòu)建electron

將windows下開發(fā)的electron源代碼拷貝到Linux上，保證將windows版本的node_modules刪除，在Linux上進行編譯

1、在Linux上的electron源代碼目錄下，確保沒有windows版本的node_modules，然后進行構(gòu)建：

1. 設(shè)置npm和electron的鏡像，可以使用國內(nèi)淘寶鏡像順利的下載資源，執(zhí)行 npm config edit

2. 執(zhí)行 npm config edit之后，會進入到 npm 的配置文件，設(shè)置鏡像

   

   ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
   ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
   registry=https://registry.npmmirror.com/
   

3. 設(shè)置完鏡像后退出

4. 確保electron代碼中對Linux下build進行了配置

   linux: {icon,target: 'AppImage',maintainer: "zj"
   }
   

5. 在electron的根目錄下執(zhí)行 npm install

6. 我的代碼中使用到了 grpc，可能會報錯grpc與electron版本不兼容的問題，此時需要使用 electron-rebuild 來重新構(gòu)建完成包之間的兼容

7. 安裝了 electron-rebuild 之后，在 package.json 中的 scripts 中設(shè)置 "rebuild": “electron-rebuild -f -w yourmodule”

   

8. 執(zhí)行 npm run rebuild ，開始重新構(gòu)建。在我測試的時候發(fā)現(xiàn)：使用node16.20.2版本搭配python3.11.5版本可以完成rebuild重新構(gòu)建

9. 打包構(gòu)建程序：npm run electron:build

2、修改Linux下chrome-sandbox沙盒的權(quán)限

由于electron嵌入了Chromium和Node.js，

在Linux系統(tǒng)上，進程和文件的權(quán)限管理比其他操作系統(tǒng)更加嚴格和細粒度。chrome-sandbox 是一個提升了特權(quán)的進程，它需要特定的權(quán)限來運行。

在構(gòu)建代碼后，運行.AppImage程序，可能會報錯：

The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /tmp/.mount_xxxxx/chrome-sandbox is owned by root and has mode 4755.

3、設(shè)置chrome-sandbox權(quán)限

1. 需要將node_modules/electron/dist/chrome-sandbox設(shè)置權(quán)限為4755，并且設(shè)置root用戶權(quán)限

2. 執(zhí)行命令：sudo chown root:root chrome-sandbox && sudo chmod 4755 chrome-sandbox

3. 重新構(gòu)建build

4、禁用沙盒

1. 若設(shè)置chrome-sandbox權(quán)限后，重新構(gòu)建仍然報錯，可以禁用沙盒運行程序

2. 在啟動程序后面加參數(shù) --no-sandbox

3. 執(zhí)行：./electron-app --no-sandbox 。此時可以成功運行程序

環(huán)境變量配置

Linux上設(shè)置環(huán)境變量的兩種方式：1. 全局設(shè)置，設(shè)置后所有用戶生效 2. 設(shè)置屬于指定用戶的環(huán)境變量

1. 全局：/etc/profile/
   1. 設(shè)置PATH：export PATH=/opt/nodejs/bin:$PATH
   2. 設(shè)置PATH追加：export PATH=$PATH:/opt/python3/bin
   3. 設(shè)置完P(guān)ATH之后需要重新運行：source /etc/profile
2. 用戶的環(huán)境變量：~/.bashrc | ~/.cshrc