【Electron将HTML项目打包成桌面应用exe文件】

目标:前端将静态页面文件夹所有页面打包成一个exe文件(不包含其它文件)可运行。

步骤

1、初始化

c 复制代码
npm init

此时项目多出一个package.json文件。

c 复制代码
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "^18.0.4"
  }
}

2、在根目录下新建main.js

c 复制代码
const { app, BrowserWindow } = require('electron')
  function createWindow () {   
// 创建浏览器窗口
const win = new BrowserWindow({
 width: 800,
 height: 600,
resizable: false, //禁止改变主窗口尺寸
// frame:false, //去掉边框和工具栏  去掉之后就不能拖拽窗口,需要自己写
maximizable: false, //禁止最大化
 webPreferences: {
   nodeIntegration: true
 }
})
// 这里是配置的入口文件,如果需要改变入口文件改这里就可以 为相对路径
win.loadFile('index.html')
 
// 打开开发者工具
win.webContents.openDevTools()
 
 }
 
 
 // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
 // 部分 API 在 ready 事件触发后才能使用。
 app.whenReady().then(createWindow)
 
 //当所有窗口都被关闭后退出
 app.on('window-all-closed', () => {
 // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
 // 否则绝大部分应用及其菜单栏会保持激活。
 if (process.platform !== 'darwin') {
     app.quit()
 }
 })
 
 app.on('activate', () => {
 // 在macOS上,当单击dock图标并且没有其他窗口打开时,
 // 通常在应用程序中重新创建一个窗口。
 if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
 }
 })

3、安装electron

cpp 复制代码
npm install electron-packager -g

4、配置package的js文件

cpp 复制代码
"scripts": {
    "start": "electron .",
    "package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"
  },

5、打包执行以下命令,此时会输出文件夹/out,找到exe文件就是打包程序的快捷方式,但是还没结束。我们只是通过electron-packager,将electron应用打包成可执行exe,我们还需要使用electron-winstaller将应用打包成exe安装程序;electron-squirrel-startup安装程序时生成快捷方式

cpp 复制代码
npm run package

6、安装打包依赖包

cpp 复制代码
npm install electron-packager --save-dev
npm install electron-squirrel-startup --save

7、新建build.js文件

cpp 复制代码
var electronInstaller = require('electron-winstaller');
var path = require("path");

resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: path.join('./out/needle-server-win32-x64'), //刚才生成打包文件的路径
    outputDirectory: path.join('./out/installer64'), //输出路径
    authors: 'Joy', // 作者名称
    exe: 'needle-server.exe', //在appDirectory寻找exe的名字
    noMsi: true, //不需要mis![这里写图片描述](https://img-blog.csdn.net/20180712225817503?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
  });

resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

7、执行后生成的文件在needle-server-win32-x64文件夹

cpp 复制代码
npm run package


8、执行命令生成单个exe文件在installer64包下,双击直接可以打开。

cpp 复制代码
node build.js

至此结束~

相关推荐
别拿曾经看以后~17 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死20 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试23 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人31 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人32 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR37 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香39 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969342 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter