【Electron】在 WSL2 中 打包 electron Linux 版本应用及运行

【Electron】在 WSL2 中 打包 electron Linux 版本应用及运行

打包 electron 应用

安装 WSL

我使用的是 Ubuntu 20.04.4 LTS 的版本。

安装 WSL 文档地址：https://docs.microsoft.com/zh-cn/windows/wsl/install。

也可以自行百度，这里就不多述了。

安装 NVM

我选择先安装 nvm 的方式来安装 Node 环境，比较容易管理，也方便有需要的时候切换各种版本。

通过下面的脚本安装

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

可以从 nvm 的 github 上找到最新的命令，https://github.com/nvm-sh/nvm

安装 Node 环境

使用 nvm 的命令 安装 node 环境

nvm install 14.*.*
nvm use 14

# PS 如果 npm 执行到的目录不对，可能执行到了 windows 中环境的目录
# 可以再执行 nvm use xx 来临时解决

获取代码

在我里这用的是我自己的架子，全当一个参考吧。

github：https://github.com/gaoshang212/electron-vite-react-typescript

git clone https://github.com/gaoshang212/electron-vite-react-typescript

安装 vscode 插件 Remote - WSL

为了方便在 vscode 中直接修改操作 wsl 中的文件。

我使用 Remote - WSL 这个插件，可以直接在vscode 修改代码，执行命令行。

插件地址：https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

安装好插件，我们就可以在 wsl 中直接执行 code . 来打包 vscode 操作了

打包

我这里只打包了 deb 和 appImage 的包，用的打包模块是 electron-builder 。

直接执行下面的命令来打包

npm run package

PS：如果打包 deb 报错，可以设置一个下 export DEBUG=”electron-builder”，查一下输出。

我里碰到的是 缺少 “ar”，只要通过 sudo apt install binutils 安装一下，就 OK 了。

打包结果：

执行验证

安装 VcXsrv

PS：如果你的系统是 Windows 11，内部版本是 22000 或更高，你也可以试试 还 GUI 的 WSL。https://docs.microsoft.com/zh-cn/windows/wsl/tutorials/gui-apps

下载 VcXsrv ，https://sourceforge.net/projects/vcxsrv/

然后安装就好了。启动 XLaunch。

选择一个喜欢的方式

选择下一页 → Start no client → 下一页 → 勾选 Disable access control → 下一页 → 完成。

配置 WSL2

修改 ~/.bashrc 文件，添加下面的代码

export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0 # in WSL 2
export LIBGL_ALWAYS_INDIRECT=true

执行下面命令应用

source ~/.bashrc

验证打包应用

进入 releases 目录，可以直接执行 appImage 文件。

cd releases
./electron-vite-react-typescript-0.0.1.AppImage

遇到问题

执行文件时遇到的几个报错

• 报错：error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
  • 安装 apt install libatk-bridge2.0-0
• 报错：error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
  • 安装 apt install libgtk-3-0
• 报错：error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory
  • 安装 apt install libgbm-dev