需要用到的一些依赖包、安装包以及更详细的打包方法word以及麒麟官网给出的文档都已放网盘,链接在文章最后!!!!!!!!!!!!!!!!!!
搭建开发环境可参考之前文章:银河麒麟v10安装前端环境(Node、vue、Electron+vite)_麒麟系统安装nodejs-CSDN博客
一.将项目打包成两种格式的包
第一种Appimage包(这种包比较简单没太多环境配置),下面是对此包的解释
1.相关代码配置:
在package.json中打包相关配置,icon必须设置否则打包会报错
"build": {
"appId": "com.electron.desktop",
"productName": "xxx",
"asar": false,
"copyright": "Copyright © 2022 electron",
"directories": {
"output": "release/"
},
"files": [
"dist"
],
"linux": {
"icon": "xxx",
"category": "System",
"target": [
{
"target": "AppImage",
"arch": [
"arm64"
]
}
]
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true,
"deleteAppDataOnUninstall": false
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080"
}
],
"releaseInfo": {
"releaseNotes": "版本更新的具体内容"
}
},
此外还必须添加author字段和homepage字段,否则打包必报错
"author": {
"name": "xxxx",
"email": "xxx"
},
"homepage": "xxx"
2.执行打包命令,有网情况下系统会自动下载工具包进行打包,也会将自动安装electron到全局,如果下载失败可手动创建文件并将压缩包放在里面,网盘里面自行下载。
此文件路径在系统根目录中的..cache/electron-builder下,因为此包是在github上下载可能会遇到下载失败情况,可在我个人网盘下载此包,手动创建electron-builder文件将包放进去即可,文件路径必须按照.cache/electron-builder
执行打包命令就可完成打包,执行程序为后缀名为AppImage的文件,双击直接运行也可在终端使用命令打开./xxxx.AppImage;
3.遇到问题及解决方法
如果双击程序没反应,程序并没有打开需要检查是否给了权限,右键图标属性=》权限=》勾选可执行,在运行程序即可.
要是还是不行在看看设置=>安装中心=》应用保护,看下是否是因为被系统阻止打开了
以上方法还是不行的话可能就是因为系统版本库中缺少啥东西,经网上查阅找到了解决方法,其原理不太明白,至少解决打不开的问题。在终端用命令启动程序后面加上个--no-sandbox。
./xxx.AppImage --no-sandbox
二、打包成格式为deb的一键安装包
打此种包有点复杂,步骤按照以下来,缺少一步都不行
1.第一步依旧是配置代码,具体代码上面也有,唯一变的就是将AppImage替换为deb
"linux": { // linux系统
"icon": "./public/icon.png",
"category": "income",
"target": [
{
"target": "deb"//AppImage
}
]
},
2.环境配置(安装fpm打包工具)
使用electron-builder打包时需要用到fpm包,但fpm包npm仓库源仅有x86_64架构的包,下不了arm架构的,打包时会有报错,必须使用arm架构的包。
我们可以从系统源中安装ruby,然后使用gem install fpm来安装fpm,然后设置全局变量,使用系统fpm具体操作方法如下:
1.sudo apt update
2.sudo apt innstall ruby -y
安装了ruby可查看版本 有版本号就成功了,下载会很慢,多等等....
4.sudo gem install fpm
麒麟v10系统使用gem安装fpm可能会有如下报错,这是由于v10系统中ruby版本低导致的,这里需要用到我在其他地方拉下来的包。
网盘将包下载来后解压使用sudo depkg -i*deb安装相关库,然后再重新进行上面的操作
5.将"export USE_SYSTEM_FPM="true""配置到环境变量
sudo vim /etc/profile 打 开配置文件
键盘shift+i 打开编辑模式,然后添加export USE_SYSTEM_FPM="true
键盘Esc 退出编辑
键盘:wq 保存文件,退出vim
source/etc/profile 使环境变量生效
6.单独使用个文件来写打包配置代码,我这里在项目中添加了个electron.config.json
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.swpe.analysis",
"productName": "123",//项目名,也是生成的安装文件名,即aDemo.exe
"copyright": "Copyright © 2020",//版权信息
"asar": false,
"directories": {
"output": "./dist"//输出文件路径
},
"linux": {
"target": "deb", // AppImage deb
// "target": [
// {
// "target": "deb",
// "arch": ["armv7l", "arm64"]
// }
// ], // arm64框架
"icon": "public/icon/abc.png",
"category": "Development",
"desktop": {
Icon: "/home/tn140/桌面/code/test-package/test2/public/icon/abc.png"
}
},
// "linux": {
// "icon": "public/icon",
// "category": "Utility",
// "target": [
// {
// "target": "AppImage"
// }
// ]
// },
}
}
}
})
第一次打包的话环境不稳定因素太多,可能fpm的问题会报一些稀奇古怪的错,第一次打包可按照这个方法操作,成功过后说明环境有效就可进行正常流程打包
7.在package.json中添加打包指令(e:arm)
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"e:arm": "USE_SYSTEM_FPM=true electron-builder --config electron.config.json -l --arm64",
"e:build": "vue-cli-service electron:build",
"e:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
输入打包命令e:arm即可完成打包
Node包、nvm包、vscode(arm版)、ruby包、麒麟官网的electron开发指导.pdf
百度云盘:https://pan.baidu.com/s/1cYB0HzoMo5iCcpKvq0LUkQ
提取码:swpe