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 等工具）打开，新建终端，输入下面的命令。

初始化依赖

1	npm install

简写

npm i

打包所需的依赖

1
2
3

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

1	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系统上