背景:之前用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给他人装即可

使用Electron-builder将web项目封装客户端安装包 发布的更多相关文章

  1. Linux CentOS7下svn+tomcat9.0+maven3.3+jenkins实现web项目自动构建与远程发布

    CentOS7下svn+tomcat9.0+maven3.3+jenkins实现web项目自动构建与远程发布 by:授客 QQ:1033553122 目录 一.    实践环境. 1 二.    安装 ...

  2. 使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

    这边主要是有一个客户,需要在电视机上安装一个客户端,含有视频直播功能:刚开始我们采用的webapp打包成apk安装在电视机上,发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频):排除一些 ...

  3. 带领技术小白入门——基于java的微信公众号开发(包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证)

    微信公众号对于每个人来说都不陌生,但是许多人都不清楚是怎么开发的.身为技术小白的我,在闲暇之余研究了一下基于java的微信公众号开发.下面就是我的实现步骤,写的略显粗糙,希望大家多多提议! 一.申请服 ...

  4. electron热更新与windows下的安装包

    帮朋友公司做了点东西,他说有很多bug,我一看,基本问题都是浏览器兼容引起的,而electron内带Chromium内核,正好一直想尝试下electron,所以研究了一波.这里只是简单的使用elect ...

  5. cordova 安卓项目打包 release安装包

    问题描述: 打包安卓项目, 如果是在项目中只是使用debug包的话, 其中的签名方式使用的都是cordova框架本身, 那么每次打包的话, 都会把之前的安装包给覆盖掉. 现在打包做出一个release ...

  6. JAVA web项目转客户端(nativefier)

    1.环境:windows 2.下载node.js 3.安装mode.js;记住安装目录 4.命令行进入安装目录 5.执行语句: npm install nativefier –g 进行安装 6.新建空 ...

  7. Java Web项目获取客户端和服务器的IP地址

    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...

  8. web项目从域名申请到发布

    http://wenku.baidu.com/link?url=H-Hu2nvzFRirdxO3xzrWCWfc4WJFLyFjsxak5MFwOuzQfgTawJLXC4vAc4xYAIySxn59 ...

  9. 微信公众号开发 包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证 2017.12.2

    https://www.cnblogs.com/klmei/p/7060879.html  基础配置很全面

  10. 如何使用VS将项目生成一个安装包?

    VS2010项目的部署与安装winform程序,我想进行安装.1.在解决方案中 ——点击右键——添加 2.然后选择 安装和部署 ——安装向导 可以更改名称 3.点击 下一步 4.然后选择上那3个 5. ...

随机推荐

  1. mysql 获取表信息 表备注等

    select table_name, table_comment, create_time, update_time from information_schema.tables-- where ta ...

  2. WinCC插件制作教程

    目录 插件的编写 插件的使用 参考资料 Creation of .NET Controls 109759944_Prepare.NetControls_DOC_en.pdf 插件的编写 创建插件项目, ...

  3. server2008R2 安装.net framework 4.7 4.8 时间戳签名和/或证书无法验证或格式错误

    安装补丁 KB4474419 和KB4490628 实测有效 补丁下载: https://www.catalog.update.microsoft.com/Search.aspx?q=4474419 ...

  4. bert一些思考

    bert结构 首先是embdding lookup,[batch * seq]-->[batch, seq, hidden] 然后是加个mask embdding和type embdding和p ...

  5. 机制设计原理与应用(三)Screening

    目录 3 Screening 3.1 为单个不可分割的项目定价 3.1.1 对\(\theta\)的假设 3.1.2 问题描述 3.1.3 特性 3.2 为无限可分的项目定价 3.2.1 对\(\th ...

  6. 小梅哥课程学习——串口发送应用之发送数据(可在vivado中仿真出现正确波形)

    //1.底层代码源代码发送10位数据 module uart_pr( clk, reset_n, send_go, data, baud_set, tx_done, uart_tx ); input ...

  7. 如何服务好B端客户

    核心价值: 2B公司的核心价值在于服务.如何服务好客户,需要的是了解客户,与客户共赢. 一.客户信任度的建立 服务:不是口头说说,是要落地与实践. 对于客户的承诺至关重要,承诺的时间点.承诺的事情要保 ...

  8. 服务器安装docker

    安装命令: curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 使用国内 daocloud 一键安装: curl -s ...

  9. 【搭建】【转】PPTP

    https://blog.51cto.com/10802692/2177227?SOURCE=DRA

  10. scrapy.Request callback不执行

    1.在scrapy.Request方法里边加上参数dont_filter=True(去重) 2.增加是不是allowed_domains范围内的url 3.yield Request 改为yield ...