Vue 3 + Electron 项目需分清开发集成与生产打包两阶段，核心是规避file://协议下history路由失效、进程通信断连、资源路径丢失问题；推荐Vite初始化+electron-builder打包，主进程隔离、路由改hash、vite设base='./'、package.json name小写短横线、主进程双环境加载逻辑、electron-builder.config.cjs配置。
Vue 3 项目初始化后配置 Electron 桌面端打包，核心是分清“开发集成”和“生产打包”两个阶段。关键不在于堆砌依赖，而在于结构清晰、协议兼容、配置闭环——尤其要避开 file:// 协议下 history 路由失效、主渲染进程通信断连、打包时资源路径丢失 这三类高频问题。
选对初始化方式，省掉一半坑
推荐优先使用官方脚手架组合，避免手动拼接：
-
Vue3 + Vite 项目：执行
npm create vite@latest my-app -- --template vue，再进入目录安装依赖；不要用 Vue CLI，它与 Electron 的构建链路耦合更深、调试更绕 -
一步集成 Electron：项目创建完成后，直接安装
electron和electron-builder（非electron-packager），命令为：pnpm add electron electron-builder -D（推荐 pnpm，锁版本更稳） -
拒绝“裸装 Electron”：别手动写
main.js后硬塞进 Vue 项目——应新建electron/目录，把主进程逻辑（main.ts）、预加载脚本（preload.ts）独立存放，与src/渲染层物理隔离
必须改的三项基础配置
以下修改缺一不可，否则打包后白屏或路由跳转失败：
-
Vue Router 切换为 hash 模式：Electron 加载的是本地
file://资源，history 模式依赖服务端支持，无法回退。修改src/router/index.ts：
✅ 正确写法：createRouter({ history: createWebHashHistory(), routes })
❌ 错误写法：createWebHistory() -
vite.config.ts 中设置 base: './'：确保打包后静态资源（js/css）路径相对正确。若不设，Vite 默认生成绝对路径
/assets/xxx.js，在 file 协议下 404 -
package.json 的 name 字段小写+短横线：例如
"name": "my-electron-app"。含大写字母、空格或中文会导致 electron-builder 构建失败，报错如Invalid package name
主进程启动逻辑要适配双环境
开发时加载 http://localhost:3000（热更新），打包后加载 dist_electron/index.html（静态文件）。主进程代码需自动识别：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 判断环境：
const isDev = process.env.NODE_ENV === 'development' - 开发时加载地址：
win.loadURL('http://localhost:3000') - 生产时加载文件：
win.loadFile(path.join(__dirname, '../dist_electron/index.html')) - 同时在
webPreferences中启用预加载脚本：preload: path.join(__dirname, 'preload.js')，并保持contextIsolation: true和nodeIntegration: false（安全前提）
打包命令与最小必要配置
无需复杂配置即可出包，先跑通再优化：
- 在
package.json的scripts中添加："build:electron": "electron-builder" - 根目录新建
electron-builder.config.cjs（CommonJS 格式，兼容性更好）：module.exports = { appId: 'com.example.myapp', productName: 'MyApp', directories: { output: 'dist_electron' }, win: { target: 'nsis' } }; - 运行
pnpm run build:electron，首次会下载 Electron 二进制，国内建议提前配置镜像（在 .npmrc 中加：electron_mirror=https://npmmirror.com/mirrors/electron/）
不复杂但容易忽略，走完这四步，一个可双平台打包、能自动更新、路由可用的 Vue3 + Electron 应用骨架就立住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
