【Electron】在 WSL2 中 打包 electron Linux 版本

【Electron】在 WSL2 中 打包 electron Linux 版本。

安装 WSL

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

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

如果你的系统是 Windows 11，内部版本是 22000 或更高，你也可以试试 还 GUI 的 WSL。

https://docs.microsoft.com/zh-cn/windows/wsl/tutorials/gui-apps

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

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

打包结果：