国产麒麟系统下打包electron+vue项目(AppImage、deb)

news2024/11/24 17:21:56

需要用到的一些依赖包、安装包以及更详细的打包方法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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1626849.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【系统架构师】-选择题(四)

1、“41”视图 ①逻辑视图(Logical View),设计的对象模型(使用面向对象的设计方法时)。 ②过程视图(Process View),捕捉设计的并发和同步特征。系统集成师 ③物理视图(Physical View),描述了软件到硬件的映射,反映了分布式特性。系…

SCI一区级 | Matlab实现BES-CNN-GRU-Mutilhead-Attention多变量时间序列预测

SCI一区级 | Matlab实现BES-CNN-GRU-Mutilhead-Attention秃鹰算法优化卷积门控循环单元融合多头注意力机制多变量时间序列预测 目录 SCI一区级 | Matlab实现BES-CNN-GRU-Mutilhead-Attention秃鹰算法优化卷积门控循环单元融合多头注意力机制多变量时间序列预测预测效果基本介绍…

命令行启动pytest自动化程序时,程序卡住不动了,不继续往下执行了

一、问题描述 在执行pytestallure自动化测试工具的时候,命令行启动程序时,程序卡住不继续往下执行,如下图所示。 代码主函数如下: 二、解决方法 测试客户项目时遇到2次此类问题,2次问题原因不一样。 原因一&#xf…

【JVM】从i++到JVM栈帧

【JVM】从i到JVM栈帧 本篇博客将用两个代码例子,简单认识一下JVM与栈帧结构以及其作用 从i与i说起 先不急着看i和i,我们来看看JVM虚拟机(请看VCR.JPG) 我们初学JAVA的时候一定都听到过JAVA“跨平台”的特性,也就是…

XiaodiSec day017 Learn Note 小迪安全学习笔记

XiaodiSec day017 Learn Note 小迪安全学习笔记 记录得比较凌乱,不尽详细 day 17 主要内容: php 框架 thinkPHPyiilaravel 使用 fofa 搜索 thinkphp 市面上 thinkphp5 版本较多 url 结构 域名/.php(文件名)/index(目录)/index(函数名)模块名-控…

律师口才训练技巧课程介绍?

律师口才训练技巧课程介绍 一、课程背景与目标 律师口才作为法律职业的核心能力之一,对于律师在**辩论、法律咨询、谈判协商等场合的表现具有至关重要的作用。然而,许多律师在口才方面存在不足,难以充分发挥自己的专业能力。因此,…

stm32开发之netxduo组件之mqtt客户端的使用记录

前言 1使用mqtt协议的简单示例记录 代码 MQTT服务端(C# 编写,使用MQTTnet提供的示例代码) 主程序 namespace ConsoleApp1;public class Program {public static async Task Main(string[] args){await Run_Server_With_Logging();}}public static async Task Run_Server_Wi…

HarmonyOS ArkUI实战开发—状态管理

一、状态管理 在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染&…

电子负载仪的远端控制

前言 最近研究了电子负载仪的远端控制(区别于前面板控制),主要是用于程序控制,避免繁琐复杂的人工控制,举了南京嘉拓和艾维泰科的例子。 有纰漏请指出,转载请说明。 学习交流请发邮件 1280253714qq.com …

CoReFace:深度人脸识别的样本引导对比正则化

CoReFace: Sample-Guided Contrastive Regularization for Deep Face Recognition 一、摘要 人脸识别对比正则化(CoReFace)(损失函数),将图像级正则化应用于特征表示学习。 具体来说,采用样本引导对比学习…

base64算法

1 介绍 将二进制数据编码为文本字符串的算法 理解:把一个能看懂的明文变成一个看不懂的密文数据统称为加密 2 使用 A 在浏览器控制台使用 加密 window.btoa(加密的数据) 解密 window.atob(MTIzNDQ) B 在VSconde中使用 加密 解密

【算法基础实验】图论-UnionFind连通性检测之quick-union

Union-Find连通性检测之quick-union 理论基础 在图论和计算机科学中,Union-Find 或并查集是一种用于处理一组元素分成的多个不相交集合(即连通分量)的情况,并能快速回答这组元素中任意两个元素是否在同一集合中的问题。Union-Fi…

基于Springboot的点餐平台

基于SpringbootVue的点餐平台的设计与实现 开发语言:Java数据库:MySQL技术:SpringbootMybatis工具:IDEA、Maven、Navicat 系统展示 用户登录 首页展示 菜品信息 菜品资讯 购物车 后台登录 用户管理 菜品分类管理 菜品信息管理 …

怎么把图片转换为二维码?3个步骤轻松制作图片二维码

图片的二维码是怎么做成的呢?现在很多场景下的二维码,用手机扫码可以展现出对应的图片信息。通过这种方式来传递图片对于用户体验与很好的效果,而且也方便制作者通过这种方式来快速完成图片信息的传递,与传统方式相比成本更低&…

【前端】4. CSS综合案例

1. 模拟新闻界面 <!-- 1.模拟实现新闻界面 --><!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

茴香豆:搭建你的RAG智能助理-作业三

本次课程由书生浦语社区贡献者【北辰】老师讲解【茴香豆&#xff1a;搭建你的 RAG 智能助理】课程。分别是&#xff1a; RAG 基础介绍茴香豆产品简介使用茴香豆搭建RAG知识库实战 课程视频&#xff1a;https://www.bilibili.com/video/BV1QA4m1F7t4/ 课程文档&#xff1a;ht…

【鸟叔的Linux私房菜】计算机概论

文章目录 电脑CPU架构单位 电脑架构与设备组件CPUCPU和GPU区别 内存显卡硬盘与存储设备主板 软件程序运行操作系统内核的功能 总结 电脑 五个部分&#xff1a;输入单元、输出单元、CPU的运算单元和逻辑控制单元、内存。 主机机箱的设备大多通过主板连接线在一起&#xff0c;主…

STM32、GD32驱动SHT30温湿度传感器源码分享

一、SHT30介绍 1、简介 SHT30是一种数字湿度和温度传感器&#xff0c;由Sensirion公司生产。它是基于物理蒸发原理的湿度传感器&#xff0c;具有高精度和长期稳定性。SHT30采用I2C数字接口&#xff0c;可以直接与微控制器或其他设备连接。该传感器具有低功耗和快速响应的特点…

Unity入门实践小项目

必备知识点 必备知识点——场景切换和游戏退出 必备知识点——鼠标隐藏锁定相关 必备知识点——随机数和Unity自带委托 必备知识点——模型资源的导入 实践项目 需求分析 UML类图 代码和资源导入 开始场景 场景装饰 拖入模型和添加脚本让场景动起来 开始界面 先用自己写的GUI…

Feign功能详解、使用步骤、代码案例

简介&#xff1a;Feign是Netflix开发的声明式&#xff0c;模板化的HTTP客户端&#xff0c;简化了HTTP的远程服务的开发。Feign是在RestTemplate和Ribbon的基础上进一步封装&#xff0c;使用RestTemplate实现Http调用&#xff0c;使用Ribbon实现负载均衡。我们可以看成 Feign R…