背景：之前用electron-packager将web项目打包成客户端时，exe文件只能在当前文件夹下运行，如果发送给别人使用 极不方便。所以我们可以用electron-builder将web项目封装成安装包给别人使用。
1、配置npm代理
npm set electron_mirror=https://npm.taobao.org/mirrors/electron/ npm set electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
2、新建main.js
// Modules to control application life and create native browser window 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') } }) // and load the index.html of the app. // mainWindow.loadFile('index.html') // Open the DevTools. // mainWindow.webContents.openDevTools() //注意 这里是我添加的，去掉electron自带菜单 Menu.setApplicationMenu(null) mainWindow.loadFile('dist/index.html') httpServer.createServer({root:"./dist"}).listen(80); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() => { createWindow() app.on('activate', function () { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
3、新建package.json
{ "name": "apiadmin", "version": "4.0.0", "author": "zhaoxiang <zhaoxiang051405@gmail.com>", "private": false, "scripts": { "view": "electron .", "build": "electron-builder" }, "main": "main.js", "build": { "productName":"nullmax", "appId": "com.wss.app", "directories": { "output": "builder" }, "nsis": { "oneClick": false, "allowElevation": true, "allowToChangeInstallationDirectory": true, "installerIcon": "./logo.ico", "uninstallerIcon": "./logo.ico", "installerHeaderIcon": "./logo.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "nullmax" }, "win": { "target": [ "nsis", "zip" ] }, "files": [ "dist/**/*", "main.js" ] }, "dependencies": { "http-server": "^14.1.1" } }
package.json解释： http://www.45fan.com/article.php?aid=1CODrX8UJM4TUTnc
"build": { "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名 "appId": "com.leon.xxxxx",//包名 "copyright":"xxxx",//版权 信息 "directories": { // 输出文件夹 "output": "build" }, "nsis": { "oneClick": false, // 是否一键安装 "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "./build/icons/aaa.ico",// 安装图标 "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标 "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "shortcutName": "xxxx", // 图标名称 "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 }, "publish": [ { "provider": "generic", // 服务器提供商 也可以是GitHub等等 "url": "http://xxxxx/" // 服务器地址 } ], "files": [ "dist/electron/**/*" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": { "icon": "build/icons" } }
4、打包
npm run build
发送 apiadmin Setup 4.0.0.exe给他人装即可