# electron-tool-test

**Repository Path**: Beikehanbao23/electron-tool-test

## Basic Information

- **Project Name**: electron-tool-test
- **Description**: electron制作跨平台工具,It is a test!
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-07
- **Last Updated**: 2025-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron 多功能工具

一个基于 Electron 和 Vue 3 的跨平台多功能工具软件，提供了现代化、酷炫的用户界面。

## 功能特点

- 跨平台支持：同时兼容 Windows 和 macOS 操作系统
- 现代化 UI：采用 Vue 3 构建的响应式界面
- 多功能菜单：包含文件、地图、设置和关于等功能模块
- 随时更新：内置自动更新功能

## 技术栈

- Electron: 跨平台桌面应用框架
- Vue 3: 前端框架，使用 Composition API
- TypeScript: 增强代码的可维护性和类型安全
- Vite: 现代前端构建工具
- Pinia: 状态管理
- Vue Router: 路由管理
- Electron Builder: 应用打包工具

## 快速开始

### 开发环境配置

1. 克隆项目

```bash
git clone https://github.com/yourusername/electron-multi-tool.git
cd electron-multi-tool
```

2. 安装依赖

```bash
npm install
```

3. 启动开发服务器

**Electron 版本**（需要安装 Electron）:

```bash
npm run dev
```

**Web 版本**（不需要安装 Electron，适合开发 UI）:

```bash
npm run dev:web
```

> **注意**：Web 版本使用模拟的 Electron API，可以在不安装 Electron 的情况下进行 UI 开发和测试。

## 项目打包

### Windows 平台打包指南

要生成 Windows 平台的安装文件(.exe)，请运行以下命令：

```bash
npm run build:win
```

打包后的文件将位于`release/{version}`目录下，文件名为`Electron多功能工具-Windows-{version}-Setup.exe`。

### macOS 平台打包指南

要生成 macOS 平台的安装文件(.dmg)，请在 macOS 系统上运行以下命令：

```bash
npm run build:mac
```

> **注意**：由于 Apple 的签名要求，macOS 应用打包通常需要在 macOS 系统上进行。如需在非 macOS 系统上打包，可能需要额外配置，但可能缺少签名。

打包后的文件将位于`release/{version}`目录下，文件名为`Electron多功能工具-Mac-{version}-Installer.dmg`。

### 跨平台打包注意事项

1. **代码签名**：

   - Windows 平台需要.pfx 证书文件
   - macOS 平台需要 Apple 开发者账号和证书

2. **自动更新**：

   - 需要配置`electron-builder.yml`中的`publish`部分，指向您的更新服务器

3. **图标设置**：
   - Windows: 需要.ico 格式图标
   - macOS: 需要.icns 格式图标

## 项目结构

```
electron-multi-tool/
├── electron/              # Electron主进程代码
│   ├── main/              # 主进程代码
│   └── preload/           # 预加载脚本
├── src/                   # 渲染进程代码 (Vue应用)
│   ├── assets/            # 静态资源
│   ├── components/        # Vue组件
│   ├── router/            # 路由配置
│   ├── store/             # Pinia状态管理
│   ├── views/             # 页面视图
│   ├── App.vue            # 根组件
│   ├── main.ts            # Electron版本入口文件
│   └── main.web.ts        # Web版本入口文件
├── index.html             # Electron版本HTML入口
├── index.web.html         # Web版本HTML入口
├── package.json           # 项目配置
├── vite.config.ts         # Electron版本Vite配置
└── vite.web.config.ts     # Web版本Vite配置
```

## 常见问题解决

### Electron 安装问题

如果在安装 Electron 时遇到网络问题，可以尝试以下解决方案：

1. **使用国内 npm 镜像源**

   ```bash
   npm config set registry https://registry.npmmirror.com
   npm config set electron_mirror https://npmmirror.com/mirrors/electron/
   ```

2. **使用 Web 版本进行开发**
   ```bash
   npm run dev:web
   ```
   Web 版本不需要安装 Electron，可以在不安装 Electron 的情况下进行 UI 开发和测试。

### TypeScript 版本兼容性问题

如果在构建过程中遇到以下错误：

```
Search string not found: "/supportedTSExtensions = .*(?=;)/"
```

这是因为 vue-tsc 与 TypeScript 5.7+ 版本不兼容。解决方案是降级 TypeScript 版本：

1. **降级 TypeScript 版本到 5.6.x**

   ```bash
   npm install typescript@5.6.3 --save-dev
   ```

2. **或者临时跳过类型检查**

   修改 package.json 中的 build:win 脚本，移除 vue-tsc 类型检查步骤：

   ```json
   "build:win": "vite build && electron-builder --win"
   ```

> **注意**：跳过类型检查会让你在构建时无法捕获类型错误，建议仅在紧急情况下使用此方法，并在之后恢复类型检查。

## 许可证

MIT