糖尿病康复,内容丰富有趣,生活中的好帮手!
糖尿病康复 > 使用electron打包spring-boot+vue项目开发桌面exe端项目一站式全部解决!专栏有解决报错文章

使用electron打包spring-boot+vue项目开发桌面exe端项目一站式全部解决!专栏有解决报错文章

时间:2020-11-24 02:20:25

相关推荐

使用electron打包spring-boot+vue项目开发桌面exe端项目一站式全部解决!专栏有解决报错文章

准备工具

前端:node.js 14以下(直接安装 node.js 即可)

后端:jre 1.8(必须1.8)

工具:

Bat_To_Exe_ConverterInno_Setup 汉化版(英文版不支持简体中文,打包出来的安装界面是英文的)

我以及给大家汇总完毕直接点击进去下载即可

/s/1XoA0tj3b4QF4laTSY9g2ng?pwd=dglo提取码:dglo

前端项目打包

注意事项:

修改代理,因为在前端vue项目中测试环境下会默认将/api转发到对应的连接,但是因为将spring-boot项目打包成为了客户端就说明不需要再进行代理等等,所以要将生产环境的对应的ip该为127.0.0.1或者改成localhost来完成。

这里使用ruoyi项目举例

打包

npm run build --prod --aot

使用 electron 打包 exe

克隆官方工具

git clone /electron/electron-quick-start

使用idea打开后要安装对应依赖

npm i -g electron@latest

修改 mian.js 配置(配置全部贴出来了,具体参数可以查询官网)

这个是阿丹的。

// Modules to control application life and create native browser windowconst { app, BrowserWindow,Menu, shell } = require('electron')const path = require('path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 1200,height: 600,webPreferences: {nodeIntegration: true,//取消新增contextIsolation: false,//取消新增路径preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.// mainWindow.loadFile('./dist/index.html')//尝试使用绝对路径来进行const indexPath = path.join(__dirname, 'dist', 'index.html');mainWindow.loadFile(indexPath)mainWindow.webContents.openDevTools() // 在这里打开开发者工具// 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.

stop.bat批处理文件的内容(在 electron-quick-start 根目录新建)用来关闭后台运行的jar包

@echo offset port=后台运行spring-boot项目的jar的端口号for /f "tokens=1-5" %%i in ('netstat -ano^|findstr ":%port%"') do taskkill /pid %%m -t -fexit

在前端vue项目中安装下载electron-packager依赖

npm install electron-packager --save-dev

在electron-quick-start项目中添加配置

"scripts": {"start": "electron .","packager": "electron-packager ./ 生成的文件夹名字--platform=win32 --arch=x64 --overwrite"},

将前端打包好的 dist 放到 electron-quick-start 根目录下

对应首页的设置

mainWindow.loadFile('./dist/index.html')

将electron-quick-start打包

npm run packager

打包完成之后会在这个文件的根目录下面生成一个 软件名字-win32-X64的文件夹

后端项目与前端项目整合

首先要准备文件

思路:

先获取spring-boot的jar并尝试使用dom窗口中的运行jar包指令来尝试看是否可以进行运行。

java -jar jar包名称

通过脚本来先启动jar包,然后再运行刚才打包好的exe前端文件。

并且需要注意的是需要jre环境。

jre:网上下载一个,要32位的 在上面的连接里面可以下载

data:里面存的是数据库文件financial.mv.db、financial.trace.db(这两个文件在后端的resources/data里面)

tong:electron打包出来的文件夹

financial.jar:maven build出来的

start.bat、start.exe、stop.bat:需要操作,往下看

这是自己新建的一个文件夹

在这个文件夹下面先写一个start.bat脚本

start /b jre1.8.0_291/bin/javaw -jar 运行jar包的名字.jarstart /b 使用electron-quick-start打出来的文件夹名字/使用electron-quick-start文件夹下打出来的exe文件.exe

start.exe生成步骤:(生成 start.exe 之前最好能够先打开 start.bat 测试项目是否可行的

打开 Bat_To_Exe_Converter,点击 Convert 生成

生成start.exe后start.bat可以删了获取放到其他地方

请使用管理员模式来打开软件(不然可能会出现问题)

这里选择start.bat我是因为没有start.bat了,象征性的截个图。

这里可能会出现一个问题(软件没有使用管理员模式来打开)

点击关闭之后发现软件也退出了。这个时候一定要重新编辑一下stop.bat这个文件,因为它已经给内容进行了修改了。出现这个问题就是修改文件的权限不够。导致的。如果出现了这个问题请返回上一步,在打开文件的时候使用管理员进行打开。

使用 Inno_Setup 汉化版打包项目

点击使用

点击进入软件

使用脚本向导创建新的脚本文件

不需要勾选创建新的空脚本文件

可以根据自己的需要进行命名要注意粗体的字是必须要填写的

使用红框框起来的也是可以进行自定义更改的。

这里需要去选中我们刚才生成的start.exe文件作为我们软件启动的程序。

这里需要添加文件夹,将我们刚才准备好的文件夹选中,就是我们刚才准备的材料的文件夹。一定要注意分辨(也是start.exe所在的文件夹)

这样就选择完毕了

这个选项如果选中的话,在用户进行安装的时候会不让用户进行选择,默认的就安装在C盘了。

如果取消掉这个选项,就可以让用户在安装的时候选择需要安装的文件夹或者盘符。

这里如果有相关的需求可以填写,如果没有的话不填写也没关系。

按照需要选择安装模式

选择语言

选择输出的文件夹即可,以及一些自定义的需求

可选,这个阿丹还真不知道是干啥的。但是他在生成这个东西的时候会报错。但不影响安装包生成。

到这一步直接一路是就可以了。

一路是就OK了,然后它可能会生成一个iss文件(随便放一个地方就可以了),然后会报一个错,不需要理会就可以。

就拥有了自己软件的安装包

如果觉得《使用electron打包spring-boot+vue项目开发桌面exe端项目一站式全部解决!专栏有解决报错文章》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。