Electron中必须使用Vue Router的hash模式，因其通过URL的#后片段实现路由切换，不触发file://协议下的文件路径查找，避免白屏和404错误；history模式依赖服务器fallback，在本地文件环境中不可用。
在 Electron 中配置 Vue 路由，核心不是“怎么配”，而是“不能怎么配”——必须避开 history 模式。因为 Electron 加载的是 file:// 协议下的本地 HTML，没有 Web 服务器做 fallback，history 模式一用就白屏或 404。
必须用 hash 模式
Vue Router 的 createWebHashHistory() 是 Electron 环境下唯一稳定的选择。它把路由信息放在 URL 的 # 后面，这部分不会触发文件系统路径查找，完全绕开 file:// 协议限制。
- 修改
src/router/index.ts（或.js）：用createWebHashHistory()替换createWebHistory() - URL 示例：
file:///C:/app/dist/index.html#/settings→ 正常加载 Settings 组件 - 如果强行用 history 模式，打包后访问
/user会尝试读取file:///user，必然报错 ERR_FILE_NOT_FOUND
publicPath 必须设为 ./
Vue 构建时生成的资源路径（如 JS、CSS）默认以 / 开头，Electron 会从系统根目录（如 C:\）去找，肯定找不到。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在
vue.config.js（Vite 项目为vite.config.ts）中设置：publicPath: './' - 这样构建出的
index.html里引用的是./static/js/app.js这类相对路径，能被正确解析 - 改完必须重新执行
npm run build，否则无效
主进程 loadFile 路径要对齐构建输出
开发时可能用 loadURL('http://localhost:5173')，但生产打包后必须指向构建产物。
立即学习“前端免费学习笔记（深入）”；
- 确保
mainWindow.loadFile('./dist/index.html')（路径根据你的outputDir调整） - 不要写成
loadFile('index.html')或loadFile('/dist/index.html')—— 前者找错位置，后者是绝对路径，跨平台易出错 - 路径写法统一用
./开头，和publicPath保持语义一致
多窗口场景下的路由一致性
如果打开新窗口（比如设置窗口、预览窗口），别为每个窗口单独写 HTML，而是复用同一套路由体系。
- 新窗口也加载
./dist/index.html - 通过 URL 参数（如
#/settings?modal=true）或 IPC 通信告诉渲染进程“该展示哪个路由” - 在子窗口的 Vue 实例中，router 实例与主窗口共用，无需重复初始化
- 避免用
loadFile('settings.html')这类多入口方式，维护成本高且路由状态无法共享
