当前位置：首页 > news >正文

Electron+vite+vue3 从0到1搭建项目，开发Win、Mac客户端

news 来源：原创 2025/5/21 5:31:28

随着前端技术的发展，出现了所谓的大前端。

大前端则是指基于前端技术延伸出来的各种终端平台及应用场景，包括APP、桌面端、手表终端、服务端等。

本篇文章主要是和大家一起学习一下使用Electron 如何打包出 Windows 和 Mac 所使用的客户端APP；

下载安装

// 前提条件 electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+
yarn create @quick-start/electroncd electron-vite-demo // 项目名
yarn install 
yarn dev

// 下载时选择项，只做参考可以更加自己需求来选
在这里插入图片描述

如果遇到yarn install 下载时提示node版本问题，请参考使用nvm 切换不同node版本

初次运行

执行 yarn dev ，我们可以看到项目正常运行了起来，开心😄

在这里插入图片描述

目录结构

先把目录放出来，大家初步了解一下结构


├── build // 构建过程中生成的临时文件
├── dist // 构建后文件，包含可发布的安装包等等
│   ├── builder-debug.yml
│   ├── builder-effective-config.yaml
│   ├── demo-1.0.0-mac.zip
│   ├── demo-app-1.0.0.dmg
│   ├── demo-app-1.0.0.exe
│   ├── latest-mac.yml
│   ├── latest.yml
│   ├── mac
│   └── win-unpacked
├── out
├── resources // 资源目录
│   ├── icon.ico
│   └── icon.png
├── src
│   ├── main // 主进程
│   │   ├── down.js
│   │   ├── index.js
│   │   ├── menu.js
│   │   ├── path.js
│   │   └── version.js
│   ├── preload // 预加载脚本
│   │   ├── down.js
│   │   ├── index.js
│   │   ├── locale.js
│   │   └── path.js
│   └── renderer  // 渲染器--前端代码
│       ├── index.html
│       └── src
├── .env.dev // 环境变量配置文件  .env.dev/.gray/.mock/.prod
├── .env.gray
├── .env.mock
├── .env.mock
├── .env.prod 
├── dev-app-update.yml
├── electron-builder.yml // 应用打包规则
├── electron.vite.config.mjs // 渲染进程（前端）的开发构建
├── package.json 
├── README.md // 项目说明文档
└── yarn.lock