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

remote-wsl-open-code.gif

打包

我這裏只打包了 debappImage 的包,用的打包模塊是 electron-builder 。

直接執行下面的命令來打包

npm run package

PS:如果打包 deb 報錯,可以設置一個下 export DEBUG=”electron-builder”,查一下輸出。

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

打包結果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章