Electron系列 -- vue项目打包成.exe文件(通过官方demo的方式)

一. 拉取官方demo (electron-quick-start)

//将electron官网中的 electron-quick-start 拉取到本地 

git clone https://github.com/electron/electron-quick-start

 

 

安装成功的目录如下 

 

2.安装好后，用vscode（Sublime Tex 等工具）打开，新建终端，输入下面的命令。

初始化依赖

npm install
简写

npm i
打包所需的依赖

npm i electron --save-dev
npm i electron-packager --save-dev
npm install -g @electron/packager

npm run start 启动项目

启动成功显示 Hello World!

 

二. 项目打包

通过将vue项目打包, 会生成一个dist文件

 

三. 修改electron-quick-start 文件

删除 electron-quick-start 文件中的index.html，把vue项目打包的dist文件放进去。
打开electron-quick-start 文件里的main.js文件，附上mian.js完整代码
重点是： mainWindow.loadFile(“./dist/index.html”) 的修改

 

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
 
function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1920,    //窗口宽度
    height: 1080,    //窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') 
    }
  })
 
  // and load the index.html of the app.
  mainWindow.loadFile('index.html') //项目入口文件
  mainWindow.setMenu(null); //    隐藏顶部菜单
 
  // Open the DevTools.
  // mainWindow.webContents.openDevTools() //打开调试工具
}
 
// 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.

嵌套的vue项目启动页面( npm run start )

 在 electron-quick-start 项目 package.json 配置文件中，scripts 下添加 packager 指令 

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ 测试xxx收银系统 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --out=./out --overwrite"
  }, // 测试xxx收银系统 为应用名

npm run packager 执行打包命令

打包完毕, node_modules同级 会生成out文件, 点开exe包就是打包好 , 可安装在windows系统上

 

四. 至此 exe 打包已完成 , 接下来使用 Inno Setup（工具生成安装程序包)

在Inno Setup 里面搭建一个脚本, 通过脚本编辑安装程序的名称, 版本. 快捷键生成, 安装目录等, 是很有必要的, 生成一次后,后续可以一直沿用 ,二次使用选择上一次创建好的脚本, 一键打包即可

 

原文地址：https://blog.csdn.net/m0_71071209/article/details/140429945