【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

至此结束~

相关推荐
莘薪5 分钟前
JQuery -- 第九课
前端·javascript·jquery
好青崧9 分钟前
CSS 样式入门:属性全知晓
前端·css·tensorflow
在路上`21 分钟前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员30 分钟前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
蒜蓉大猩猩34 分钟前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
铅华尽1 小时前
前端---HTML(一)
前端
无限大.1 小时前
0基础学前端系列 -- 深入理解 HTML 布局
前端·html
珹洺1 小时前
从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html
wh柒八九1 小时前
wkhtmltopdf的安装与使用
pdf·html
前端Hardy1 小时前
HTML&CSS:翻书加载效果
前端·javascript·css·3d·html·css3