likes
comments
collection
share

Electron应用完成linux系统适配前言 因工作中遇到适配统信系统，因此记录一下踩坑经历 阅读前需具备一定的Ele

作者站长头像
站长
· 阅读数 122

前言

因工作中遇到适配统信系统，因此记录一下踩坑经历 阅读前需具备一定的Electron开发经验，具备一定linux环境常用命令经验，能开发shell脚本

打包环境构建（二选一）

Docker

在本地环境安装docker，拉取官方electron-builder镜像搭建环境

步骤：

1.安装docker：

官方地址：www.docker.com/ 下载后安装即可

2.拉取镜像：
  • 2.1 参考Run docker container：www.electron.build/multi-platf…
  • 2.2 docker hub中搜索electronuserland/builder
  • 2.3 选择对应的镜像：14-wine-chrome-07.24（14是node版本）
  • 2.4 在powerShell中拉取镜像（建议开启代理，不然会很慢）
docker pull electronuserland/builder:14-wine-chrome-07.24
  • 2.5 基于镜像创建容器： 方式一：命令行创建
docker run -d --name pack-linux --env ELECTRON_CACHE="/root/.cache/electron" --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" -v E:\docker-map:/project electronuserland/builder:14-wine-chrome-07.24

方式二：docker面板中找到对应的镜像，创建容器

Vmware

使用虚拟机安装Ubuntu或者其他linux系统 本文使用UOS系统（统信）

本文中使用第二种VMware方式来完成开发调试以及打包；主要是因为vmware有图形界面，将本地代码上传到系统中，可以直接进行开发调试；

Electron应用完成linux系统适配前言 因工作中遇到适配统信系统，因此记录一下踩坑经历 阅读前需具备一定的Ele

安装开发环境: 1.安装nvm,打开terminal

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

# 国内的用户如果网络对GitHub不友好，无法下载安装，可以使用这个
# curl -o- https://raw.fastgit.org/nvm-sh/nvm/v0.38.0/install.sh | bash

2.安装完成后，您需要重新启动终端或输入以下命令使 nvm 生效：

source ~/.bashrc

3.使用nvm安装项目依赖的node版本

# 安装node版本
nvm install <version>
# 使用node版本
nvm use <version>

4.使用npm安装nrm，切换淘宝/腾讯镜像

遇到的问题

使用electron-builder进行打包

1.开发/生产环境的判断方式失效
{
    ...
    scripts: {
        "start": "set NODE_ENV=development && electron .",
    }
}

使用 set NODE_ENV=development 在linux环境失效； 替换为electron中app.isPackaged

You can use the app.isPackaged API to check the environment.>

2.transparent失效

new BrowserWindow({
  ...
  transparent: true, //设置透明
  alwaysOnTop: true, //窗口是否总是显示在其他窗口之前
});

因业务用到了transparent属性，但是在linux下显示窗口整个背景为黑色 找到是官方问题： github.com/maximegris/…

因为一直在虚拟机中测试，所有尝试了很多写法都不行，最后找了一台电脑直接装UOS后，就没问题；

如果electron老版本遇到此问题，在linux环境增加如下代码即可

if(process.platform === 'linux') {
    app.on('ready', () => setTimeout(createWindow, 400));
}
3.render部分的程序，如果在window使用正常，linux下开发环境跑不起来

建议：直接将package-lock.json一起传Linux下，或者挨个解决linux下的报错；

4.新开一个窗口时，加载路由失败（白屏）:

webpack的动态导入路由模块失效：require.context 修改为主路由文件中直接定义打开窗口时需要的路由

5.提示package.json中字段author,email,homepage缺失（window无此问题）
{
    ...
    "author": "author",
    "email": "test@qq.com",
    "homepage": "https://github.com/yc-lm",
}
6.打包时安装依赖失败：

如遇到下载依赖失败，使用淘宝/腾讯镜像来回切换，多试几次可以成功；

以下是electron-builder的依赖，可手动下载依赖包，然后传到指定目录即可；

默认的缓存目录是 /home/{current_user}/.cache目录,可以找到electron以及electron-builder

etahadmin@etahadmin-PC:~/.cache$ pwd
/home/etahadmin/.cache
etahadmin@etahadmin-PC:~/.cache$ ls
abrecovery  dmanHelper        gstreamer-1.0      kwin               org.deepin.chineseime  uos
browser     electron          icon-cache.kcache  mesa_shader_cache  qtshadercache
deepin      electron-builder  iflytek            obexd              thumbnails

elctron-builder打包dep是依赖：fpm-1.9.3-2.3.1-linux-x86_64

etahadmin@etahadmin-PC:~/.cache/electron-builder/fpm$ ls
034346747  149237663  230008777  338585627.7z  480157695  844058729  fpm-1.9.3-2.3.1-linux-x86_64
054687594  201060856  338585627  449787999     498126508  861631370

先下载fpm-1.9.3-2.3.1-linux-x86_64，然后传到 /home/{current_user}/.cache/electron-builder/fpm中

7.打包后，安装dep包，桌面以及应用管理中图标均不显示

以下是尝试成功的配置：

    {
    "build": {
      "appId": "yourAppId",
      "productName": "yourProductName",
      "directories": {
      "output": "build"
      },
      "extraResources": [
        {
          "from": "icons/",
          "to": "icons/"
        },
        {
          "from": "extend/",
          "to": "extend/"
        }
      ],
      "win": {
        "target": "nsis",
        "icon": "icons/logo.ico"
      },
      "nsis": {
        "include": "./build/installer.nsh",
        "deleteAppDataOnUninstall": true
      },
      "linux": {
        "target": "deb",
        "maintainer": "username",
        "category": "Education",
        "icon": "./icons"
      },
      "deb": {
        "afterInstall": "./extend/entries/afterInstall.sh",
        "afterRemove": "./extend/entries/afterRemove.sh"
      }
    },
}

需要有与main.js同级目录icons，extend/entries icons结构如下

Electron应用完成linux系统适配前言 因工作中遇到适配统信系统，因此记录一下踩坑经历 阅读前需具备一定的Ele

8.打包后加载index.html白屏问题

loadUrl和loadFile的问题

// Load a remote URL  
win.loadURL('https://github.com')  
  
// Or load a local HTML file  
win.loadFile('index.html')

# window下开发和生产环境均使用loadURL没有问题；
# linux环境loadURL加载path.join(__dirname, "..", "dist", "index.html")失败
9.安装成功以及移除成功后执行的脚本

afterInstall.sh

#! /bin/sh
DesktopName=StreamlineRecording.desktop
# desktop位置
DesktopPath=/opt/youProductName/resources/extend/entries/$DesktopName
# root桌面
RootDesktop=/root/Desktop
# softVgaPath
SoftVgaPath=/opt/youProductName/resources/extend/linuxSoftVga
# virtualVga路径
VirtualVgaPath=$SoftVgaPath/virtualVga
# ffmpeg
FfmpegPath=$SoftVgaPath/ffmpeg
# usbFile
TtyUsbFilePath=/opt/youProductName/resources/extend/entries/99-ttyusb.rules
# 给root创建桌面图标
if [ -d $RootDesktop ]; then
  cp $DesktopPath $RootDesktop
fi

users=`users`

# 给所有用户增加图标
for u in $users
do
  # 中英文桌面
  DesktopDir=/home/$u/Desktop
  CnDesktopDir=/home/$u/桌面

  if [ -d $DesktopDir ]; then
    cp $DesktopPath $DesktopDir;
    chmod 777 $DesktopDir/$DesktopName;
  fi

  if [ -d $CnDesktopDir ]; then
    cp $DesktopPath $CnDesktopDir;
    chmod 777 $CnDesktopDir/$DesktopName
  fi
done

# 设置 chrome-sandbox 的所有者为 root 并设置正确的权限
# 确保使用正确的路径到您的 chrome-sandbox 文件
chromeSandboxPath="/opt/youProductName/chrome-sandbox"

# 检查 chrome-sandbox 文件是否存在
if [ -f "$chromeSandboxPath" ]; then
  # 更改所有者为 root
  sudo chown root:root "$chromeSandboxPath"

  # 设置权限为 4755
  sudo chmod 4755 "$chromeSandboxPath"

  echo "chrome-sandbox 权限和所有者已设置。"
else
  echo "警告：未找到 chrome-sandbox 文件：$chromeSandboxPath"
fi

# softVga权限处理
if [ -f "$VirtualVgaPath" ]; then
  sudo chmod 777 "$VirtualVgaPath"
fi

if [ -f "$FfmpegPath" ]; then
  sudo chmod 777 "$FfmpegPath"
fi


# 串口的相关
# chmod 777 /dev/ttyUSB*
cp -f $TtyUsbFilePath /etc/udev/rules.d/
# 执行
udevadm control --reload-rules
udevadm trigger
# 是否存在/dev/ttyUSB0
if [ -c "/dev/ttyUSB0" ]; then
  sudo chmod 777 /dev/ttyUSB*
fi

afterRemove.sh

#! /bin/sh
#名称
DesktopName=StreamlineRecording.desktop
# root桌面
RootDesktop=/root/Desktop/$DesktopName
# 给root创建桌面图标
if [ -f $RootDesktop ]; then
  rm $RootDesktop
fi

users=`users`

# 给所有用户增加图标
for u in $users
do

  DesktopDir=/home/$u/Desktop/$DesktopName

  CnDesktopDir=/home/$u/桌面/$DesktopName

  if [ -f $DesktopDir ]; then
    rm $DesktopDir
  fi

  if [ -d $CnDesktopDir ]; then
    rm $CnDesktopDir
  fi
done

创建桌面图标 StreamlineRecording.desktop

[Desktop Entry]
Encoding=UTF-8
Name=youProductName
Name[zh_CN]=youProductName
Exec=/opt/youProductName/streamline-recording %U
Icon=/opt/youProductName/resources/icons/512x512.png
StartupNotify=false
Terminal=false
Type=Application
Categories=Education;

总结

  1. 以上主要是完成适配linux中遇到的问题，还有mac系统未进行适配；
  2. 还有一些与串口相关的问题以上没有列举，与业务关联较多
  3. 安装过程中下载依赖失败，我是使用代理，以及多次尝试解决，有更好的办法，请大家积极发言

deb包安装成功截图：

Electron应用完成linux系统适配前言 因工作中遇到适配统信系统，因此记录一下踩坑经历 阅读前需具备一定的Ele

以上有写的不对的请大家指出，其他小伙伴有同样需求的可下方留言，有问题大家一起探讨提高

转载自:https://juejin.cn/post/7410923898646511666
评论
请登录