# 桌面端模版

**Repository Path**: xiaole9924/desktop-template

## Basic Information

- **Project Name**: 桌面端模版
- **Description**: react+electron分离模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-12
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron + React 分离式项目

这是一个将 Electron 和 React 分离开发的项目模板。React 应用运行在端口 5173 上，Electron 主进程可以在开发环境连接到 React 开发服务器，在生产环境加载打包后的静态文件。

## 项目结构

```
electron-react-separate/
├── web/                    # React 应用
│   ├── src/               # React 源码
│   ├── package.json       # React 依赖
│   └── vite.config.ts     # Vite 配置（端口 5173）
├── electron-main/         # Electron 主进程
│   ├── src/
│   │   ├── main.ts        # Electron 主进程入口
│   │   └── preload.ts     # 预加载脚本
│   ├── package.json       # Electron 依赖
│   └── tsconfig.json      # TypeScript 配置
└── package.json           # 根目录脚本
```

## 安装依赖

```bash
# 安装所有依赖（会自动安装 web 和 electron-main 的依赖）
npm install
```

## 开发模式

```bash
# 启动开发环境（同时启动 React 开发服务器和 Electron）
npm run dev

# 或者分别启动
npm run dev:web      # 启动 React 开发服务器（端口 5173）
npm run dev:electron # 启动 Electron（连接到 React 开发服务器）
```

## 生产构建

```bash
# 构建所有组件
npm run build

# 或者分别构建
npm run build:web      # 构建 React 应用到 electron-main/static/
npm run build:electron # 编译 Electron TypeScript 代码
```

## 打包应用

```bash
# 构建并打包成可执行文件
npm run package
```

打包后的文件会在 `electron-main/dist-electron/` 目录中。

## 清理构建文件

```bash
npm run clean
```

## 开发说明

### React 应用 (web/)
- 使用 Vite 作为构建工具
- 开发服务器固定在端口 5173
- 构建输出到 `electron-main/static/` 目录

### Electron 主进程 (electron-main/)
- 使用 TypeScript 开发
- 开发环境连接到 `http://localhost:5173`
- 生产环境加载 `static/index.html`
- 包含安全的预加载脚本

### 安全特性
- 禁用 Node.js 集成
- 启用上下文隔离
- 通过预加载脚本安全地暴露 API
- 防止不安全的窗口创建

## 自定义配置

### 修改端口
如需修改 React 开发服务器端口，需要同时修改：
1. `web/vite.config.ts` 中的 `server.port`
2. `electron-main/src/main.ts` 中的 `REACT_DEV_URL`

### 添加 Electron API
在 `electron-main/src/preload.ts` 中添加安全的 API 接口，然后在 React 应用中通过 `window.electronAPI` 调用。

## 故障排除

1. **端口被占用**：确保端口 5173 没有被其他应用占用
2. **依赖问题**：运行 `npm run clean` 然后重新 `npm install`
3. **TypeScript 错误**：确保所有依赖都已正确安装

## 技术栈

- **React**: 前端框架
- **Vite**: 构建工具
- **Electron**: 桌面应用框架
- **TypeScript**: 类型安全
- **Electron Builder**: 应用打包