ZyPlayer开发环境搭建：从0到1配置Electron开发环境

【免费下载链接】ZyPlayer 跨平台桌面端视频资源播放器,免费高颜值. 项目地址: https://gitcode.com/gh_mirrors/zy/ZyPlayer

ZyPlayer作为跨平台桌面端视频资源播放器，基于Electron框架构建，结合Vue3和TypeScript提供现代化开发体验。本文将从环境依赖、项目构建到调试运行，完整呈现开发环境搭建流程，确保开发者能够快速投入功能开发。

开发环境依赖清单

搭建ZyPlayer开发环境需满足以下系统及工具版本要求：

依赖项	版本要求	用途说明
Node.js	20.x 或 ≥22.x	运行时环境，项目配置明确指定
npm	7.24.2+	包管理工具，用于安装项目依赖
Git	任意稳定版	版本控制与代码拉取
操作系统	Windows/macOS/Linux	支持Electron跨平台特性

核心开发工具包括：

• Electron 36.4.0：桌面应用框架
• Electron-Vite 3.1.0：构建工具链
• Vue 3.5.16：前端UI框架
• TypeScript 5.8.3：类型检查

项目获取与依赖安装

代码仓库克隆

通过Git工具获取项目源码：

git clone https://gitcode.com/gh_mirrors/zy/ZyPlayer.git
cd ZyPlayer

依赖安装策略

项目采用npm作为包管理器，执行以下命令安装依赖：

# 安装生产依赖与开发依赖
npm install

# 如需单独安装特定依赖（如Electron）
npm install electron@36.4.0 --save-dev

依赖安装完成后，node_modules目录将包含所有必要库，包括：

• 核心视频播放库：artplayer、dplayer等
• API请求工具：axios
• 数据库ORM：drizzle-orm

项目配置文件解析

构建配置核心文件

项目构建系统基于Electron-Vite实现，核心配置位于electron.vite.config.ts，该文件定义了三部分关键配置：

1. Main进程配置：

main: {
  resolve: {
    alias: { '@main': resolve('src/main') } // 路径别名配置
  },
  build: {
    emptyOutDir: true, // 每次构建清空输出目录
    sourcemap: false // 禁用sourcemap减小体积
  },
  plugins: [externalizeDepsPlugin(), swcPlugin()] // 依赖外部化与SWC编译
}

2. Renderer进程配置： 包含Vue插件、TSX支持、SVG加载器等前端构建相关配置，通过别名设置简化组件导入路径。

3. Preload脚本配置： 处理Electron主进程与渲染进程通信的桥接脚本。

打包配置文件

electron-builder.yml定义了应用打包规则，包括：

• 应用元数据（名称、版本、描述）
• 打包目标平台（Windows/macOS/Linux）
• 资源文件包含规则

开发调试工作流

开发服务器启动

执行开发命令启动热重载开发环境：

# 启动带热重载的开发服务器
npm run dev

该命令对应package.json中的scripts配置，实际执行：

chcp 65001 | electron-vite dev -w

其中chcp 65001用于设置Windows命令行编码为UTF-8，避免中文乱码。

项目结构概览

成功启动开发环境后，可看到以下核心目录结构：

src/
├── main/          # 主进程代码 [src/main/index.ts](https://link.gitcode.com/i/0c24fd71715867cd01b6b8f077f97a25)
├── preload/       # 预加载脚本 [src/preload/index.ts](https://link.gitcode.com/i/9a5de4856f6525a82310b049e1fea690)
└── renderer/      # 渲染进程代码 
    ├── src/
    │   ├── App.vue  # 应用入口组件
    │   └── pages/   # 页面组件目录

调试工具配置

项目集成了Vue DevTools增强开发体验，配置位于electron.vite.config.ts#L6：

import vueDevTools from 'vite-plugin-vue-devtools';

// 在renderer插件中启用
plugins: [vueDevTools()]

构建与打包流程

开发构建

执行构建命令生成应用资源：

# 构建主进程、渲染进程与预加载脚本
npm run build

构建产物位于out目录，包含：

• main: 主进程编译结果
• renderer: 前端资源打包结果
• preload: 预加载脚本

应用打包

根据目标平台执行对应打包命令：

# Windows平台打包
npm run build:win

# macOS平台打包
npm run build:mac

# Linux平台打包
npm run build:linux

打包产物位于dist目录，包含可安装文件或绿色版应用目录。

常见问题解决方案

依赖安装失败

问题表现：npm install时Electron下载缓慢或失败。
解决方法：配置npm镜像源：

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

构建报错：模块未找到

问题原因：路径别名配置错误。
验证方法：检查electron.vite.config.ts中的别名设置是否正确映射到src/main目录。

调试时渲染进程空白

排查步骤：

1. 检查开发服务器是否正常启动（默认端口是否占用）
2. 查看浏览器控制台网络请求是否有404资源
3. 验证路由配置是否正确注册页面

项目核心模块导览

成功搭建环境后，可重点关注以下功能模块进行二次开发：

1. 视频播放核心： src/renderer/src/components/player/目录包含多播放器实现，支持artplayer、dplayer等多种播放引擎。

2. 数据库模块： src/main/core/db/实现数据持久化，使用drizzle-orm操作SQLite数据库。

3. API服务： src/main/core/server/routes/定义后端API路由，基于fastify框架构建。

4. 用户界面： 主界面布局位于src/renderer/src/layouts/index.vue，采用响应式设计适配不同屏幕尺寸。

扩展开发建议

1. 新增视频解析器： 在src/main/core/server/routes/v1/parse/目录添加新解析器实现。

2. 自定义快捷键： 修改src/main/core/shortcut/目录下的快捷键配置文件。

3. 主题定制： 通过修改src/renderer/src/style/theme/目录下的LESS变量实现主题切换。

完成上述步骤后，开发环境已完全就绪。可通过修改代码并观察热重载效果进行功能开发，开发完成后执行打包命令生成可分发应用。项目文档与更多示例可参考README.md。

【免费下载链接】ZyPlayer 跨平台桌面端视频资源播放器,免费高颜值. 项目地址: https://gitcode.com/gh_mirrors/zy/ZyPlayer