一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

描述

最近在公司也是在经理的安排下学习Electron,这一路走来真的是曲曲折折，跌宕起伏。今天，经理经理给了我一个项目，说让我测试一下在Linux系统下能否正常运行，于是乎我开始查找Electron打包相关的文章。最后确定使用electron-builder工具进行打包部署。electron-builder--README

废话不多说了，开干🚗

简单初始化一个小项目Demon

由于公司项目很大，考虑到怕把它给整坏了，所以自己就先初始化一个简单的Demon项目，然后在Windows10系统下打包。具体怎么初始化一个项目我就省略。

当前项目安装依赖electron和electron-builder

//依赖安装不成功的话多尝试几次，换科学上网工具，切换淘宝镜像等等
cnpm i -D electron
cnpm install electron-builder --save-dev

配置package.json文件（Win）

Win配置如下

{
  "name": "demon",
  "version": "1.0.0",
  "description": "Demon",//必须
  "main": "index.js",//必须
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64",//必须
  },
  //接下来的都需要配置下
  "build": {
    "productName": "Demon",//项目名字
    "appId": "com.Demon.aa",//
    "copyright": "",
    "directories": {
      "output": "dist"//输出文件夹
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "asar": false,
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  },
  "author": "onion",
  "license": "ISC",
  "devDependencies": {
    "cnpm": "^7.1.1",
    "electron": "^18.1.0",
    "electron-builder": "^23.0.3",
    "install": "^0.13.0"
  }
}

具体的配置项可以参考这里：通用配置electron.build

Win下打包支持Win的包

npm run build

结果是这样的：

我尝试打开dist文件夹运行了一下.exe文件并安装了一下下面这个页面，说明打包成功。

配置package.json文件（Linux）

Linux配置如下

{
  "name": "demon",
  "version": "1.0.0",
  "description": "Demon",
  "main": "index.js",
  "homepage": "./",//Linux下必须要有
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64",
    "uos": "electron-builder --linux"//必须
  },
  "build": {
    "productName": "Demon",
    "appId": "com.Demon.aa",
    "copyright": "",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    //linux下的配置
    "linux": {
      "target": [
        {
          "target": "deb",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "asar": false,
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  },
  "author": "onion",
  "license": "ISC",
  "devDependencies": {
    "cnpm": "^7.1.1",
    "electron": "^18.1.0",
    "electron-builder": "^23.0.3",
    "install": "^0.13.0"
  }
}

具体的配置项可以参考这里：通用配置electron.build

Win下打包支持Linux的包

npm run uos

结果报错了，就很裂😂 上网查了一下，说是在构建多平台的包，不能指望在一个系统下全部完成，于是乎我就下载虚拟机了，为什么呢？因为后续我得看看我打包的项目到底可以在Linux上运行不。

安装虚拟机VMware

安装虚拟机我是参照网上的资源安装的，由于安装完成后需要把我宿主机Windows系统下的文件给到Linux,所以后续配置了Linux专属的ip地址，利用xshell工具，把问你件发给Linux

有机会咱也会总结一下虚拟机安装的步骤和教程啥的😂

在Linux系统下全局安装node.js和npm

有机会咱也会去总结下具体步骤😂

• 全局安装cnpm（有时候npm不太行cnpm还可以拿来用用）
• 设置淘宝镜像（网络问题最好设置一下）

全部准备就绪，在Linux下打包

• 移除在win系统下载的node_modules

//进入项目文件夹Demon打开
 rm -rf node_modules/

• 重新下载依赖

npm  i    或者   cnpm  i  

出现这个不用管它，没有报错就行

• 打包

npm run uos

• 打开dist下的linux-unpacked文件夹，运行demon文件

问题一 就是说这个sandbox没有授权，要么我们给他授权，要么就是在运行时加上：

./项目名字 --no-sandbox
//比如
./demon --no-sandbox 

问题二 可能运行demon文件时候会出现没有执行权限的问题，这里我们给他最高的权限，只需要执行下面的就可以了

chmod 7777 ./项目名字的可执行文件

最后终于可以运行了

总结

当你努力了很多快要放弃的时候往往灵感迸发的最强烈，爱迪生说过：99%的努力+1%的灵感=成功，可下一句是有时候1%的比99%的努力更重要，所以啊，有时候遇到bug解决半天没搞出来，不要急，放平心态。