使用Electron将vue项目打包成exe的实现方式

302 阅读1分钟

本项目并没有使用electron-vue插件,而是采用的将打包后的dist文件放入electron-demo中。

electron文档地址:www.electronjs.org/docs

1.前期准备

vue项目打包命令:  npm run build

下载electron-demo项目

github.com/electron/el…

在electron-demo使用npm install 进行环境配置,插件安装。

将打包生成的dist复制到 electron-demo项目中,

使用  npm run start  运行项目即可。

注意:真实项目需注意文件相关路径,避免资源获取不到或者白屏情况

2.在package.json中设置 packager项

运行 npm install -g electron-packager 命令

运行 npm run packager命令生成一个指定文件名称的目录

3.采用NISS工具进行exe安装包生成。

链接:pan.baidu.com/s/1KcI7Ca_N…

提取码:2c2t 

安装完成后选择文件

下方为个人项目中的main,js,具体配置根据业务需求进行配置。

const { app, BrowserWindow, Menu, dialog, globalShortcut } = require('electron')// 去除顶部菜单栏Menu.setApplicationMenu(null)// 使用os获取当前可访问网络的mac let os = require('os')function getIPAdressMac () {  var interfaces = os.networkInterfaces();  var interfacesArry = []  for (let i in interfaces) {    interfacesArry.push(interfaces[i]);  }  let interfacesArryone = [];  for (let item of interfacesArry) {    interfacesArryone.push(...item);  }  for (let i = 0; i < interfacesArryone.length; i++) {    let currentItem = interfacesArryone[i]    if (currentItem.family === 'IPv4' && currentItem.address !== '127.0.0.1' && !currentItem.internal) {      return currentItem.mac;    }  }}const remoteIpMac = getIPAdressMac()let mainWindow// 创建窗口事件function createWindow () {  mainWindow = new BrowserWindow({ width: 1366, height: 768, minWidth: 1366, minHeight: 768, show: false, icon: './exe.ico' });  if (remoteIpMac == undefined) {    dialog.showMessageBox(mainWindow, {      type: 'warning',      title: '温馨提示',      defaultId: 0,      message: '网络未连接,请连接网络后再试!'    })  } else {    let mac = remoteIpMac.toUpperCase().replace(/:/g, '-');    mainWindow.loadURL(`file:${__dirname}/dist/index.html?mac=${mac}`)    mainWindow.maximize();    mainWindow.show()    // 点击关闭按钮事件    mainWindow.on('close', (e) => {      e.preventDefault();      dialog.showMessageBox(mainWindow, {        type: 'info',        title: '温馨提示',        defaultId: 0,        message: '您确定要关闭吗?',        buttons: ['最小化', '直接退出'],        cancelId: 2      }).then((index) => {        if (index.response === 0) {          mainWindow.minimize();        } else if (index.response === 1) {          mainWindow = null;          app.exit();        }      });    })  }  mainWindow.on("focus", (e) => {    globalShortcut.register('F5', function () {      mainWindow.reload()    })  })}// // 设置只打开一个应用const gotTheLock = app.requestSingleInstanceLock()if (!gotTheLock) {  app.quit()} else {  app.on('second-instance', (event, commandLine, workingDirectory) => {    // 当运行第二个实例时,将会聚焦到mainWindow这个窗口    if (mainWindow) {      if (mainWindow.isMinimized()) mainWindow.restore()      mainWindow.focus()      mainWindow.show()    }  })}app.on('ready', function () {  createWindow()})app.on('window-all-closed', function () {  if (process.platform !== 'darwin') app.quit()})app.on('activate', function () {  if (mainWindow === null) createWindow()})app.on('browser-window-focus', function () {  globalShortcut.register('F5', function () {    mainWindow.reload()  })})app.on('browser-window-blur', function () {  globalShortcut.unregisterAll();})