# electron-template

**Repository Path**: public_12/electron-template

## Basic Information

- **Project Name**: electron-template
- **Description**: electron开发模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-02
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron + Vue 3 + TypeScript + Vite

本项目集成 Electron、Vite、Vue 3、Element Plus，并通过自动路由与自动导入提升开发效率。

## 如何运行

### 前置要求
- 已安装 `Node.js >= 18`
- 使用 `pnpm` 作为包管理器（推荐）：`npm i -g pnpm`
- Windows 用户建议在 PowerShell 里运行命令

### 安装依赖
```bash
pnpm install
```

### 仅 Web 开发
- 启动：
```bash
pnpm run dev:web
```
- 访问：`http://localhost:5173/`（端口占用时可能切到 `5174`）

### Electron 开发
可选两种方式：

- 方式 A（插件一体化，便捷）：
```bash
pnpm exec cross-env ELECTRON=true VITE_DEV_SERVER=true vite
```
说明：在开发模式下，Vite 会同时启动前端与 Electron 主/预加载构建，并尝试拉起 Electron 应用。

- 方式 B（手动两步，稳定推荐）：
1) 启动前端 Dev Server：
```bash
pnpm run dev:web
```
2) 在另一个终端启动 Electron（指向 Dev Server）：
```bash
pnpm exec cross-env VITE_DEV_SERVER=true electron .
```
说明：主窗口会加载 `http://localhost:5173`（或实际端口）。若首次运行遇到主进程构建问题，可先执行一次：
```bash
pnpm run build
```
以生成 `dist-electron` 后再启动。

### 生产构建与打包
- 仅构建（生成 `dist` 与 `dist-electron`）：
```bash
pnpm run build
```
- 构建并打包应用（使用 `electron-builder` 生成安装包）：
```bash
pnpm run build:app
```
打包产物输出在 `release/` 目录（按平台生成 `.exe`、`.dmg`、`.AppImage` 等）。

### 可选：一键启动脚本（推荐）
如果希望单命令同时启动 Web 与 Electron，可在 `package.json` 添加脚本（需要 `concurrently` 与 `wait-on`，已在 devDependencies 中）：
```json
{
  "scripts": {
    "dev:electron": "concurrently -k \"pnpm:dev:web\" \"wait-on http://localhost:5173 && cross-env VITE_DEV_SERVER=true electron .\""
  }
}
```
然后运行：
```bash
pnpm run dev:electron
```

### 常见问题
- 端口占用：Vite 会自动换端口（如 `5174`），Electron 方式 B 会跟随主进程逻辑读取 `http://localhost:5173`，请根据实际端口调整；或通过 `wait-on` 脚本确保端口就绪。
- Electron 安装失败：如果提示重新安装，可删除 `node_modules/electron` 后重装或执行 `node ./node_modules/electron/install.js`。
- `.vue` 解析失败：确保安装了 `@vitejs/plugin-vue` 并且未禁用。

### 技术要点
- 自动路由：`src/router.ts` 基于 `import.meta.glob('./routes/**/*.vue')` 自动注册 `src/routes` 下的视图。
- 自动导入：`unplugin-auto-import` 与 `unplugin-vue-components` 已配置 Element Plus 组件与 API（如 `ElMessage`）。
- Electron 主进程为 ESM：通过 `fileURLToPath(import.meta.url)` 定义 `__dirname`，确保开发/打包运行正常。



调试入口

- Web 前端： pnpm run dev:web 后在浏览器按 F12 打开开发者工具。
- Electron 渲染进程：在窗口中打开 DevTools（下面给出代码与命令两种方式）。
- Electron 主进程：用 --inspect 或 --inspect-brk 启动，在 chrome://inspect 或 VSCode 附加调试。
渲染进程调试

- 命令方式（推荐稳定流程）：
  - 终端1： pnpm run dev:web
  - 终端2： pnpm exec cross-env VITE_DEV_SERVER=true electron .
  - 在窗口中按 Ctrl+Shift+I 尝试打开 DevTools（如果未响应，使用下面的代码方式）。
- 代码方式（自动打开）：
  - 在 electron/main.ts 的 createMainWindow() 里，加载 URL 后添加：
    - if (isDev) mainWindow.webContents.openDevTools({ mode: 'detach' })
  - 这样开发模式下会自动弹出 DevTools。
- 代码方式（渲染层按钮触发）：
  - main.ts 增加： ipcMain.handle('devtools:toggle', () => mainWindow?.webContents.toggleDevTools())
  - preload.ts 增加： toggleDevTools: () => ipcRenderer.invoke('devtools:toggle')
  - 渲染层通过 window.electron.toggleDevTools() 触发。



### 打包时报错问题

需要在设置里面开发开发者模式