首先需要准备的环境及工具

注意了啊!不需要你会 electron 就可以打包exe项目!
注意了啊!不需要你会 electron 就可以打包exe项目!
注意了啊!不需要你会 electron 就可以打包exe项目!

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

后端:jre 1.8(必须1.8)

工具:

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

前端项目打包

安装依赖

npm install

我使用了 vue 脚手架 vue cli,所以会有env.production文件,具体的代理地址修改成你们自己的就行
.env.production 修改 baseApi 为后端访问地址,我这里改为本地访问

VUE_APP_baseApi = http://127.0.0.1:12346/

打包

npm run build --prod --aot

打包后会有个 dist 文件夹,存好待会使用 electron 跑起来

使用 electron 打包 exe

克隆官方demo

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

安装依赖

npm i -g electron@latest

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

const {app, BrowserWindow, Menu, shell} = require('electron')
const path = require('path')

function createWindow () {
  //隐藏菜单 
  Menu.setApplicationMenu(null)
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  // 在关闭electron时,启动stop.bat把java进程也关闭
  shell.openPath(path.resolve() + '\\stop.bat');
  if (process.platform !== 'darwin') app.quit()
})

stop.bat批处理文件的内容(在 electron-quick-start 根目录新建)

@echo off
set port=12346
for /f "tokens=1-5" %%i in ('netstat -ano^|findstr ":%port%"') do taskkill /pid %%m -t -f
exit

前端打包:

npm install electron-packager --save-dev

package.json 添加参数

"scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ tong --platform=win32 --arch=x64  --overwrite"
},

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

main.js

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

image-20210910144645017

打包

npm run packager

最后会在根目录生成 tong-win32-x64 文件夹

后端项目与前端项目整合打包

首先需要准备一下文件
声明:为什么会有 data 这个目录,因为我开发使用的数据库是 h2,然后是本地连接的方式,所以需要有一个目录去存放数据库的数据文件,如果你们开发的是联网的程序,可以省略 data 这个目录

  1. jre:网上下载一个,要32位的
  2. data:里面存的是数据库文件financial.mv.db、financial.trace.db(这两个文件在后端的resources/data里面)
  3. tong:electron打包出来的文件夹
  4. financial.jar:maven build出来的
  5. start.bat、start.exe、stop.bat:需要操作,往下看

image-20210910150511012

start.bat的内容:(第一行后面的profiles是多环境配置,没这项配置的小伙伴自行删除

start /b jre1.8.0_291/bin/javaw -jar financial.jar --spring.profiles.active=prod
start /b tong/tong.exe

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

打开 Bat_To_Exe_Converter,点击 Convert 生成

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

使用 Inno_Setup 汉化版打包项目

image-20210910151620711

image-20210910151647022

image-20210910151754853

image-20210910151832661

最后一路“是”,即可打包成功

Logo

前往低代码交流专区

更多推荐