四、方案 2：Electron 包裹前后端（进阶，跨平台）
若需跨平台（Windows/Mac/Linux）或定制化 EXE 界面（如嵌入浏览器，无需打开系统浏览器），可使用 Electron。核心思路是：Electron 启动后，同时启动 Spring Boot 后端（通过 Node.js 调用命令行）和加载 Vue 前端（Electron 内置 Chrome 内核）。
关键步骤
打包 Vue 前端：同方案 1，生成dist文件夹（publicPath设为./）。
打包 Spring Boot 后端：同方案 1，生成 Jar 包。
创建 Electron 项目：
初始化Electron项目
npm init -y
安装依赖
npm install electron shelljs --save
编写 Electron 主程序（main.js）：
const { app, BrowserWindow } = require('electron');
const shell = require('shelljs');
const path = require('path');
let backendProcess; // 后端进程
// 启动Spring Boot后端
function startBackend() {
// 路径为Electron项目中Jar包的位置
const jarPath = path.join(__dirname, 'backend', 'xxx-0.0.1-SNAPSHOT.jar');
// 启动Jar包（需确保用户电脑有Java，或嵌入JRE）
backendProcess = shell.exec(`java -jar "${jarPath}"`, { async: true });
}
// 创建Electron窗口（加载Vue前端）
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: false, // 关闭Node集成，安全
contextIsolation: true
},
icon: path.join(__dirname, 'icon.ico') // 窗口图标
});
// 加载Vue前端（本地静态文件）
win.loadFile(path.join(__dirname, 'frontend', 'index.html'));
// 窗口关闭时终止后端进程
win.on('closed', () => {
if (backendProcess) backendProcess.kill();
});
}
// Electron就绪后启动
app.whenReady().then(() => {
startBackend();
createWindow();
});
// 所有窗口关闭时退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
整理 Electron 项目结构：
electron-project/
├─ backend/
│ └─ xxx-0.0.1-SNAPSHOT.jar # Spring Boot Jar包
├─ frontend/
│ └─ index.html等Vue静态资源 # Vue打包后的dist文件
├─ main.js # Electron主程序
└─ package.json # 项目配置
打包 Electron 为 EXE：
安装打包工具：npm install electron-packager --save-dev
在package.json中添加脚本：
"scripts": {
"start": "electron .",
"package": "electron-packager . MyApp --platform=win32 --arch=x64 --out=out --icon=icon.ico"
}
执行打包命令：npm run package，EXE 会生成在out目录下。
常见问题
Node版本要大于》=18
更换 npm 镜像源（推荐使用国内镜像）：
设置淘宝 npm 镜像
npm config set registry https://registry.npmmirror.com/
Windows 命令行中执行（临时生效）
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
然后重新安装
npm install electron shelljs --save
永久配置（修改 npm 配置文件）：
直接编辑项目根目录的 .npmrc 文件（如果没有就新建一个），添加：
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
如果上述方法仍失败，尝试手动下载 Electron：
从国内镜像手动下载对应版本的 Electron 包（https://npmmirror.com/mirrors/electron/），然后通过环境变量指定本地路径安装：
bash
set ELECTRON_CUSTOM_DIR=13.1.7 # 替换为你下载的版本号
set ELECTRON_MIRROR=file:///D:/path/to/your/downloaded/folder/ # 本地路径
npm install electron --save