# vite-element-plus-electron

**Repository Path**: jiao-bingjie/vite-element-plus-electron

## Basic Information

- **Project Name**: vite-element-plus-electron
- **Description**: 这是一个基于 Vite、Vue 3、Element Plus 和 Electron 构建的桌面应用程序
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-04
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3, element-plus, Electron

## README

# Vite + Element Plus + Electron 桌面应用

这是一个基于 Vite、Vue 3、Element Plus 和 Electron 构建的桌面应用程序。

## 项目结构

```
vite-element-plus-electron/
├── electron/                 # Electron 主进程文件
│   ├── main.js              # Electron 主进程入口
│   └── preload.js           # 预加载脚本
├── src/                     # Vue 应用源码
├── dist/                    # 构建输出目录
├── scripts/                 # 开发脚本
└── package.json             # 项目配置
```

## 开发环境

### 安装依赖

```bash
npm install
```

### 启动开发环境

```bash
# 同时启动 Vite 开发服务器和 Electron 应用
npm run electron-dev
```

### 仅启动 Web 开发服务器

```bash
npm run dev
```

### 仅启动 Electron（需要先构建）

```bash
npm run electron
```

## 生产环境

### 构建应用

```bash
# 构建 Web 应用
npm run build

# 构建并打包 Electron 应用
npm run electron-pack

# 构建发布版本（不发布）
npm run dist
```

## 功能特性

- ✅ Vue 3 + Vite 快速开发
- ✅ Element Plus UI 组件库
- ✅ Electron 桌面应用框架
- ✅ 热重载开发环境
- ✅ 自动导入 Vue 和 Element Plus API
- ✅ 路由管理（Vue Router）
- ✅ 状态管理（Pinia）
- ✅ HTTP 请求封装（Axios）
- ✅ 跨平台打包支持

## 开发说明

### Electron 主进程

- `electron/main.js`: 主进程入口文件，负责创建窗口和管理应用生命周期
- `electron/preload.js`: 预加载脚本，提供安全的渲染进程与主进程通信接口

### 安全配置

- 禁用 Node.js 集成（`nodeIntegration: false`）
- 启用上下文隔离（`contextIsolation: true`）
- 使用预加载脚本进行安全通信

### 开发环境配置

- 开发环境：加载 `http://localhost:8080`
- 生产环境：加载 `dist/index.html`
- 自动检测环境并切换加载方式

## 打包配置

支持打包为以下格式：

- **Windows**: NSIS 安装包
- **macOS**: DMG 镜像
- **Linux**: AppImage

打包输出目录：`release/`

## 常见问题

### 1. Electron 窗口无法加载页面

确保 Vite 开发服务器已启动并运行在 `http://localhost:8080`

### 2. 热重载不工作

检查 `electron-reload` 是否正确安装和配置

### 3. 打包失败

确保所有依赖都已正确安装，并检查 `package.json` 中的 `build` 配置

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **UI 组件库**: Element Plus
- **桌面框架**: Electron
- **路由**: Vue Router
- **状态管理**: Pinia
- **HTTP 客户端**: Axios
- **打包工具**: electron-builder