方案简介

本方案是一个基于 Vue3 + Electron + TypeScript 的桌面应用起步模板，集成了 ViteJS 与 Electron Builder。它解决的问题是：开发 Electron 桌面应用时，前端渲染进程需要快速的构建与热更新体验，而主进程产物又需要便捷的跨平台打包与分发。模板将两者组合打通：开发阶段由 Vite 为 Vue 驱动的前端进程提供构建与热重载（HMR）；发布阶段由 Electron Builder 打包出易于分发、支持跨平台编译的应用。适合希望用熟悉的 Vue3 技术栈快速启动 Electron 桌面项目、并需要 Windows/macOS/Linux 多平台产物的开发者。

亮点与能力

• 基于 Vue3 + TypeScript 的 Electron 应用模板
• 开发模式带热重载（HMR），前端改动即时生效
• 使用 Electron Builder 打包，应用易于分发
• 支持 Windows、macOS、Linux 跨平台编译目标
• 项目结构清晰，区分主进程与渲染进程源码
• 提供 scripts 目录，构建/服务脚本可自由修改
• 支持静态文件随应用安装复制并从主进程读取

组成与分工

• Vue：渲染进程（Renderer）的 UI 框架，承载桌面应用界面
• Electron：桌面应用运行时，提供主进程（Main）与窗口能力
• Vite：构建并为 Vue 驱动的前端进程提供服务，提供热重载（HMR）
• Electron Builder：构建 Electron 主进程并打包出可分发、支持跨平台编译的应用
• TypeScript：全项目的类型安全开发语言
• scripts/ 目录：存放用于构建或启动应用的脚本，可按需修改

前置要求

依赖通过 npm 管理，克隆仓库后安装依赖即可：

bash
npm install

建议通过 GitHub 的模板功能或直接克隆获取代码：

bash
git clone git@github.com:Deluze/electron-vue-template.git

实施步骤

1. 获取模板

点击仓库顶部绿色 Use this template 按钮创建自己的仓库并克隆；或者直接克隆本仓库：

bash
git clone git@github.com:Deluze/electron-vue-template.git

2. 安装依赖

bash
npm install

3. 启动开发

bash
npm run dev

该命令启动应用并开启热重载，可在开发中即时看到前端改动。

4. 构建发布

构建后可分发文件位于 dist 文件夹，也可按平台选择构建目标：

bash
npm run dev # starts application with hot reload
npm run build # builds application, distributable files can be found in "dist" folder

OR

npm run build:win # uses windows as build target
npm run build:mac # uses mac as build target
npm run build:linux # uses linux as build target

使用与配置要点

• 项目结构：scripts/ 存放所有用于构建或启动应用的脚本，可按需修改；src/main/ 是主线程（Electron 应用源码）；src/renderer/ 是渲染线程（VueJS 应用源码）。

• 静态文件：需要随应用安装复制到 app 目录的文件，放入 src/main/static 目录。该目录中的文件仅主进程可访问，类似 src/renderer/assets 仅渲染进程可访问。

• 从主进程引用静态文件示例（假定 src/main/static/myFile.txt 存在）：

ts
/ Assumes src/main/static/myFile.txt exists /

import {app} from 'electron';
import {join} from 'path';
import {readFileSync} from 'fs';

const path = join(app.getAppPath(), 'static', 'myFile.txt');
const buffer = readFileSync(path);

• 更多可选配置项见 Electron Builder CLI 文档。

注意事项与常见问题

• src/main/static 中的文件仅主进程可访问，渲染进程无法读取；同理 src/renderer/assets 仅渲染进程可访问。
• 构建产物输出在 dist 文件夹。
• 需要自定义打包参数时，可查阅 Electron Builder CLI 文档中的可选配置项。

优缺点

• ✓ 开发时热重载提效
• ✓ 支持跨平台编译分发
• ✕ README 功能说明较简单

出处

本方案挖掘自开源项目 Deluze/electron-vue-template，方案内容与实施命令均来自其 README 原文。