# electron-vite-template

**Repository Path**: gtxiaoruirui/electron-vite-template

## Basic Information

- **Project Name**: electron-vite-template
- **Description**: 创建electron + vite程序的模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-13
- **Last Updated**: 2025-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-vite-template

---

## 介绍
创建electron + vite程序的模板。总体分两部分：

### 前端部分
1. 采用Vite+Vue进行开发。因为前端和Electron分离的情况，完全可以使用其他自己喜欢的前端开发框架。
2. 本地开发时使用: `npm run dev`，打开开发服务器，web路径: `http://localhost:8080`。
3. 打包时使用：`npm run build`。首先，会调用`npm run build-only`，将前端代码打包到electron/electron-vite路径下，用于electron打包后本地加载打包出来的前端代码。最后，切换到electron目录，并调用`npm run build`，进行electron-builder打包。

### Electron部分
1. 开发时，使用`npm run dev`，开启本地窗口进行开发。
2. 打包时，切换到根目录，执行`npm run build`（即使用前端部分的`npm run build`命令，见上方）。

---

## 使用说明

### 开发时
1. `cd electron-vite-template && npm i`
2. `npm run dev`，开启前端调试服务器。
3. 开启新的命令行，`cd electron`进入electron目录。
4. `npm i`，下载依赖。
5. `npm run dev`，开启electron的开发窗口。

### 打包时
1. `cd electron-vite-template`
2. `npm run build`，依次编译前端代码和Electron代码。生成的前段代码放在electron/dist-vite下面，生成的Electron ts->js代码放在electron/dist-electron下，生成的最终发布文件将放在electron/release下面。

---

## 调试
参考：https://blog.csdn.net/qq_43478653/article/details/138842007

---

## 参考
[npm create electron-vite]