Electron + Vue 3 + Node.js 的跨平台桌面应用示例项目

Electron + Vue + Node.js 原生模块学习示例

项目简介

这是一个结合 Electron + Vue 3 + Node.js 的跨平台桌面应用示例项目，用于学习和展示 Node.js 原生模块在 Electron 环境中的使用。

技术栈

• Electron: ^39.2.7 - 跨平台桌面应用开发框架
• Vue: ^3.5.24 - 渐进式 JavaScript 框架
• Vite: ^7.2.4 - 下一代前端构建工具
• Node.js: >= 20.0.0 (推荐使用 LTS 版本)

环境要求

Node.js 版本

推荐使用 Node.js 20.x LTS 版本，因为 Electron 39 基于 Node.js 20.x 构建。

你可以通过以下命令检查当前 Node.js 版本：

node -v

如果需要管理多个 Node.js 版本，推荐使用：

• nvm (Windows/Linux/macOS)
• n (macOS/Linux)

项目结构

.
├── electron/              # Electron 主进程代码
│   ├── main.js           # 主进程入口文件
│   └── preload.js        # 预加载脚本
├── src/                  # Vue 渲染进程代码
│   ├── assets/           # 静态资源
│   ├── App.vue           # 根组件
│   ├── main.js           # 渲染进程入口
│   └── style.css         # 全局样式
├── public/               # 静态资源
├── dist-electron/        # Electron 构建产物
├── dist/                 # Vue 构建产物
├── dist-installer/       # 安装包产物
├── electron-builder.json # Electron 构建配置
├── package.json          # 项目依赖和脚本
└── vite.config.js        # Vite 配置

安装依赖

npm install

开发模式

启动开发服务器：

npm run dev
# 或
npm run electron:dev

这将同时启动 Vite 开发服务器和 Electron 应用。

打包构建

构建生产版本

npm run build
# 或
npm run electron:build

打包配置

项目使用 electron-builder 进行打包，配置文件为 electron-builder.json。

打包产物

• Windows : 生成 .exe 安装包和绿色版文件夹
• macOS : 生成 .dmg 镜像文件
• Linux : 生成 .deb、.rpm 等格式

自定义打包配置

你可以在 electron-builder.json 中修改打包配置，例如：

• 应用名称
• 图标
• 打包格式
• 依赖项

项目功能

• 展示 Vue 3 在 Electron 中的基本使用
• 演示 Node.js 原生模块的调用
• 提供完整的开发和构建流程
• 包含预加载脚本示例

常见问题

1. 安装依赖失败

如果安装依赖时遇到网络问题，可以尝试使用淘宝镜像：

npm install --registry=https://registry.npmmirror.com

2. 打包失败

• 确保 Node.js 版本符合要求
• 检查是否有足够的磁盘空间
• 查看控制台错误信息

3. 应用启动失败

• 检查端口是否被占用
• 查看开发者工具中的错误信息

许可证

MIT License

作者

Developer

项目地址 gitee.com/niehuizhe/e...