环境
jre: 21
node: v24.11.1+
Bat_To_Exe_Converter
Inno_Setup
项目相关资料可以拉取：gitee.com/cznczai/all…
一、搭建vue3+vite+eletron
通过这一步，我们需要实现的目标是能运行electron来展示vue3的内容。我们从0开始，开始搭建项目环境。
1、 初始化项目
npm create vite@latest my-vue-app -- --template vue-ts
2、 安装依赖
npm install
3、 检查是否安装成功
运行项目，无报错即可，确保前面执行的步骤没有问题
npm run dev
4、 引入electron
在vue3中引入electron，需要引入相关依赖。
npm install electron -D
npm install electron-builder -D // 主要利用electron-builder来进行打包。
npm install electron-devtools-installer -D // 该包主要是为了方便我们开发和调试electron
npm install electron-packager -D // 主要利用electron-packager来进行打包。
npm install vite-plugin-electron -D // 该包集成了Vite和Electron，比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API
npm install rimraf -D // 该包主要是辅助作用，让我们快速删除某些文件和文件夹。
5、 修改项目配置文件
这一步主要是为了对electron进行适配，实现electron正常运行。
5.1 新建Electron主进程代码
为了方便修改代码和查看，我们在项目根目录新建主进程文件夹src-electron，然后在其目录下新建index.ts文件，编写主进程代码。
- app.isPackaged：为了写出一份同时兼容开发和生产的代码，Electron 提供了 app.isPackaged 这个布尔值属性。它在开发时为 false，在生产打包后为 true。这是我们编写条件路径逻辑的关键。
// src-electron/index.ts
import { app, BrowserWindow } from "electron";
import path from "path";
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const fileName = fileURLToPath(import.meta.url);
const dirName = dirname(fileName);
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
title:'app',
webPreferences: {
nodeIntegration: true, // 如果你需要在渲染进程中使用Node.js
// 连接与渲染层的交互
preload: path.join(dirName, "preload.ts")
},
});
if (app.isPackaged) {
// 用electron-packager生成的包后，运行包里对应的exe时，会将执行当前部分
win.loadFile(path.join(dirName, "../dist/index.html"));
} else {
// npm run dev时，运行为此部分
let url = "http://localhost:3000"; // 本地启动的vue项目路径
win.loadURL(url);
}
win.webContents.openDevTools() //打开调试窗口
};
app.whenReady().then(() => {
createWindow(); // 创建窗口
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 关闭窗口
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
5.2 新建预加载文件
electron中有一个预加载的概念，也就是我们常说的preload，在该文件里面可以在其它脚本文件执行之前运行，它可以调用一些Node API。 在项目根目录新建src-electron文件夹，然后在其目录下新建preload.ts文件，编写代码。
// src-electron/preload.ts
import os from "os";
console.log("platform", os.platform());
5.3 修改tsconfig.app.json
前面我们已经建好了渲染进程和预加载文件，自动生成的Vue3+ts项目只初始化了src目录下的文件监听，而新建的src-eletron放在项目根目录里面的，需要进行配置才能文件监控，所以我们需要修改一下tsconfig.json配置文件。
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"types": ["vite/client"],
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": [ // 定义项目src的范围
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.d.ts",
"src-electron/**/*.ts",
]
}
5.4 修改vite.config.ts
设置vite命令的配置，在vite运行vue后，也运行electron。这一点很重要。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 执行vite后，同时把electron运行起来
electron({
// 主进程入口文件
entry: './src-electron/index.ts'
})
],
/*开发服务器选项*/
server: {
// 端口
port: 3000,
}
})
5.5 修改package.json
package.json作为一个项目里面很重要的一个文件，我们自然是不能忽略的。在这里我们需要配置我们项目的入口文件以及打包的相关配置。
{
"name": "app",
"private": true,
"version": "0.0.0",
"main": "./src-electron/index.ts",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview",
"packager": "electron-packager ./ installer--platform=win32 --arch=x64 --overwrite"
},
"dependencies": {
"vue": "^3.5.25"
},
"devDependencies": {
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.2",
"@vue/tsconfig": "^0.8.1",
"concurrently": "^9.2.1",
"electron": "^40.8.0",
"electron-builder": "^26.8.1",
"electron-devtools-installer": "^4.0.0",
"electron-packager": "^17.1.2",
"rimraf": "^6.1.3",
"typescript": "~5.9.3",
"vite": "^7.3.1",
"vite-plugin-electron": "^0.29.0",
"vue-tsc": "^3.1.5",
"wait-on": "^9.0.4"
}
}
6、 试运行VUE3+Eletron+vite效果
npm run dev // 试运行能否运行
npm run packager // 试运行能否打包
到了这一步，electron已经成功引入到vue3中了，可以开始我们的开发工作
二、将springboot3+jre与electron+vue3打包成安装包
这一步有点类似于第一步，核心问题是如何把jar包跟vue3+electron打包成一个安装包，并且能运行后启动。
1、 准备材料
- 将springboot3达成jar包放到打包目录中。
- 将jre版本放到指定目录中。
- 将npm run packager打出来的包放到打包目录中。
2、在打包中创建一个start.bat、stop.bat脚本
start.bat，能够将我们所需要的应用进行运行。
start /b jdk-21.0.10/bin/javaw -jar 运行jar包的名字.jar > output.log 2>&1
start /b installer-platform=win32-win32-x64/installer-platform=win32.exe
stop.bat
@echo off
set port=后台运行spring-boot项目的jar的端口号
for /f "tokens=1-5" %%i in ('netstat -ano^|findstr ":%port%"') do taskkill /pid %%m -t -f
exit
3、将start.bat转化为start.exe
4、 使用 Inno_Setup 汉化版打包项目
4.1 使用脚本向导创建新的脚本文件
打开Inno_Setup软件，选择“用脚本创建新的脚本文件”，选择后点击确定。 不需要勾选创建新的空脚本文件
4.2 需要添加文件夹跟启动脚本
这里需要添加文件夹，将我们刚才准备好的文件夹选中，就是我们刚才准备的材料的文件夹。
4.3 取消选中“创建主执行程序的快捷方式到公共开始菜单程序文件夹”
这个选项如果选中的话，在用户进行安装的时候会不让用户进行选择，默认的就安装在C盘了。
4.4 选择好安装路径，然后一路“确定”即可
4.5 生成安装包就大功告成了
问题登记
1、__dirname is not defined
preload: path.join(__dirname, "preload.js") // 参考上文，将dirName换成新的获取方式
2、tsconfig.json添加include标签报错
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" }, // 依赖子json文件，所以直接把include加到tsconfig.app.json中即可。
{ "path": "./tsconfig.node.json" }
],
}
3、在package.json的script设置"start": "electron .",运行时不生效
- "start": "electron ."：执行该脚本时，仅启动了 Electron 主进程，但完全没有触发 Vite 开发服务器的启动。若想用"start": "electron ."启动应用时，
- 须安装
npm install concurrently --save-dev
- 在package.json的script设置
"start:wait": "concurrently \"vite\" \"wait-on http://localhost:5173 && electron .\""
// 等待Vite服务就绪后再启动Electron（避免加载空白）
但效果可以通过上文安装vite-plugin-electron后，直接运行npm run dev平替。
