【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 操作了

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

打包

我这里只打包了 debappImage 的包,用的打包模块是 electron-builder 。

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

npm run package 

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

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

打包结果:

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

执行验证

安装 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。

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

选择一个喜欢的方式

选择下一页 → 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 

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

遇到问题

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

  • 报错: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
发表评论

相关文章