使用Electron-packager打包已有的web项目，发布客户端

1、先拉electron代码

　　git clone https://github.com/electron/electron-quick-start

2、将web项目拷贝到electron-quick-start文件夹下

3、更改main.js 更换引用的html

const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')
//因为项目使用server，添加了这个库，添加前，别忘了使用 npm i http-server 安装库。
const httpServer = require('http-server');



function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  //注意 这里是我添加的，去掉electron自带菜单
  Menu.setApplicationMenu(null)
  mainWindow.loadFile('output/index.html')
  httpServer.createServer({root:"./output"}).listen(80);
}

4、安装打包工具，添加打包命令

npm i electron-packager

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ APP --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite"
  }

命令解释：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

location of project：项目所在路径
name of project：打包的项目名字
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
architecture：决定了使用 x86 还是 x64 还是两个架构都用
electron version：electron 的版本
optional options：可选选项

例子：

electron-packager ./  helloworld --platform=win32 --arch=x64 --out=./app --electron-version=3.0.7  

 

 

5、运行打包命令

npm run packager

可能遇到的坑：

1、打包超时 

# yarn
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

# npm
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

2、图标报错

rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for './src/assets/olami.ico'
解决方法：
下载生成ico工具：
https://icofx.ro/
下载之后，选择需要的图片（其他格式），后ctrl+s生成.ico图片