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

使用,electron,packager,打包,已有,web,项目,发布,客户端 · 浏览次数 : 576

小编点评

**1. 下载代码** ```bash git clone https://github.com/electron/electron-quick-start2.git ``` **2. 将 web 项目拷贝到 electron-quick-start 文件夹下** ```bash cd electron-quick-start cp -r ./ . ``` **3. 修改 main.js** ```javascript const path = require('path') // 添加 server 库 const httpServer = require('http-server'); // 创建窗口 function createWindow () { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 关闭默认菜单 Menu.setApplicationMenu(null) // 加载 HTML 文件 mainWindow.loadFile('output/index.html') // 启动 HTTP 服务 httpServer.createServer({ root: "./output" }).listen(80) } // 创建窗口 createWindow() ``` **4. 安装打包工具** ```bash npm i electron-packager ``` **5. 添加打包命令** ```json { "scripts": { "start": "electron .", "packager": "electron-packager ./ APP --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite" } } ``` **6. 运行打包命令** ```bash npm run packager ``` **注意：** * 将 `logo.ico` 替换为您的应用程序图标路径。 * 将 `APP` 替换为您的应用程序名称。 * 将 `19.0.6` 替换为您的 Electron 版本。

正文

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图片