Linux下打包electron项目


本来 electron-builder是支持在windows下开发,然后一条命令打包到不同平台的,但此命令需要使用远程服务器来完成打包,然后此服务器已经停止很长时间了,而且从官方文档可感知后续不会开启。所以要打linux包必须到linux平台下打包。

本文采用Deepin国产linux操作系统为例进行Electron打包:

1.安装node:

1.1 下载

从nodejs官网到本地后上传到Linux服务器,也可在linux中直接下载。

下载地址是:https://nodejs.org/en/download/

解压到/usr/local/nodejs文件夹。(可自定义位置)

1.2 建立软链接

通过建立软链接的方式将这个设置为全局,使之在任何位置可执行node命令。

$ sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin
$ sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin

1.3 修改镜像源

编辑npm config修改镜像源:

npm config edit

弹出配置文档,i编辑,esc退出编辑模式,:wq写入后退出。

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

2.下载 Electron + Vite + Vue3+TS 脚手架项目

自己新建vue+vite+electron+ts项目费时且易错,可直接下载下面的脚手架项目来使用。

GitHub - electron-vite/electron-vite-vue: ?? Really simple Electron + Vite + Vue boilerplate.

直接下载electron-vite-vue项目到本地,然后传到linux服务器上,打linux包必须在linux服务器上进行。

当然linux要下载安装vscode。(从应用商城中下载)

3.在linux下打包

在linux下安装了vscode,把我们下载的脚手架项目拷贝到linux下,用vscode打开

原项目package.json缺少homepage和description两项配置,加上这两项,然后加上build命令,修改后如下:

{
 "name": "electron-vue-vite",
 "version": "2.0.0",
 "main": "dist/electron/main/index.js",
 "author": "路飞",
 "homepage":"http://www.baidu.com",
 "description": "一个vue+electron脚手架项目",
 "license": "MIT",
 "private": true,
 "scripts": {
   "dev": "vite",
   "build": "vue-tsc --noEmit && vite build && electron-builder"
},
 "engines": {
   "node": ">=14.17.0"
},
 "devDependencies": {
   "@vitejs/plugin-vue": "^2.3.3",
   "electron": "^19.0.3",
   "electron-builder": "^23.0.3",
   "typescript": "^4.7.3",
   "vite": "^2.9.9",
   "vite-plugin-electron": "^0.4.6",
   "vite-plugin-resolve": "^2.1.2",
   "vue": "^3.2.36",
   "vue-tsc": "^0.36.0"
},
 "env": {
   "VITE_DEV_SERVER_HOST": "127.0.0.1",
   "VITE_DEV_SERVER_PORT": 3344
},
 "keywords": [
   "electron",
   "rollup",
   "vite",
   "vue3",
   "vue"
]
}

在终端中初始化依赖项:

npm install

等初始化完成后,执行打包命令:

npm run build
saft@saft-PC:~/Desktop/docment/electronvuets$ npm run build
?
> electron-vue-vite@2.0.0 build /home/saft/Desktop/docment/electronvuets
> vue-tsc --noEmit && vite build && electron-builder
?
(node:16208) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
? 1 modules transformed.
dist/electron/preload/splash.js   1.48 KiB / gzip: 0.70 KiB
dist/electron/preload/splash.js.map 3.71 KiB
vite v2.9.12 building for production...
? 1 modules transformed.
dist/electron/main/index.js   1.37 KiB / gzip: 0.77 KiB
vite v2.9.12 building for production...
? 17 modules transformed.
dist/electron.fe1dfbad.png   61.65 KiB
dist/vite.92024911.svg       1.50 KiB
dist/vue.03d6d6da.png        6.69 KiB
dist/index.html              0.60 KiB
dist/style.b05f3b27.css      0.59 KiB / gzip: 0.33 KiB
dist/index.0f17d918.js       52.73 KiB / gzip: 21.28 KiB
 ? electron-builder  version=23.1.0 os=5.10.101-amd64-desktop
 ? loaded configuration  file=/home/saft/Desktop/docment/electronvuets/electron-builder.json5
 ? writing effective config  file=release/2.0.0/builder-effective-config.yaml
 ? packaging       platform=linux arch=x64 electron=19.0.5 appOutDir=release/2.0.0/linux-unpacked
 ? downloading     url=https://npm.taobao.org/mirrors/electron/19.0.5/electron-v19.0.5-linux-x64.zip size=83 MB parts=2
 ? downloaded      url=https://npm.taobao.org/mirrors/electron/19.0.5/electron-v19.0.5-linux-x64.zip duration=7.957s
 ? building        target=deb arch=x64 file=release/2.0.0/electron-vue-vite_2.0.0_amd64.deb
 ? default Electron icon is used  reason=application icon is not set

可以看到,electron-builder会默认取到当前系统框架信息os=5.10.101-amd64-desktop,作为参数,打包对应于本框架的应用程序。

这时候在项目release目录下生成了安装包,我们先试试安装此程序:

安装完成后菜单中会出现electron-vue-vite程序。

再试试免安装程序可否直接运行:

点运行后打开electron程序

相关