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

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