如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
问题
通常我们都用uniapp开发安卓和苹果客户端，还有小程序客户端，但是如果要打包桌面exe是否可行？
答案是可行的。
具体步骤
以本项目为例子，这是前端开源地址：
https://gitee.com/youyacao/youyacao-ai-uniapp
可以先下载好。
1. 安装 Node.js 和 Electron
首先，确保你已经安装了 Node.js（既然在使用uniapp做客户端开发，这个是必需品，这里不单独讲了）。
但是有一点，切记，node 对版本管理很麻烦，开发环境是什么版本，一定要记下来 v21.1.0 这是蜻蜓AI智能工具前端的node版本，如果版本不对应一定会有很多问题导致运行不起来，因此我们nvm安装这个版本。
执行：
nvm install v21.1.0
然后，通过 npm（Node.js 的包管理器）全局安装 Electron：
npm install electron -g
扩展知识：
Electron是一个由GitHub开发的开源框架，它允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。通过将Chromium和Node.js嵌入到同一个运行时环境中，Electron使得开发者能够使用Web技术来创建可以在Windows、macOS和Linux上运行的应用程序，而无需为每个平台编写特定的原生代码。以下是关于Electron的详细介绍：
Electron的主要特点
- 跨平台兼容性：支持Windows、macOS和Linux。
- 基于Web技术：使用HTML、CSS和JavaScript进行应用开发。
- 内置Node.js和Chromium：提供强大的UI渲染能力和访问操作系统底层功能的API。
- 多进程架构：包含主进程和渲染进程，通过IPC机制实现进程间通信。
Electron的应用场景
Electron广泛应用于需要跨平台支持的桌面应用开发，如企业内部工具、数据可视化工具、代码编辑器、媒体播放器等。
Electron与其他跨平台开发框架的对比
与Qt等传统跨平台开发框架相比，Electron在开发效率、技术栈统一性、社区支持等方面具有优势，但在性能、内存占用等方面可能存在劣势。选择哪个框架取决于具体的项目需求和开发团队的熟悉程度。
大家看到扩展知识的描述了吗，对的，支持Windows、macOS和Linux，那么核心就是如果开发桌面端，我们可以优先考虑Electron。
2. 导入 UniApp 项目
导入uniapp项目，直接在gitee可以下载
3. 配置main.js
写入以下代码 给大家解释下
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 720, height: 1280, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:8080') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
这里得宽度 width: 720,高度 height: 1280,就是优雅草央千澈要打包出的客户端的尺寸呢，因为我们蜻蜓AI智能工具本身是为移动端造的，所以这是我们的尺寸，你们打包其他应用按照自己的来。
4. 配置package.json
"build": { "productName": "MyApp", "directories": { "output": "dist" }, "files": [ "dist/electron/**/*" ], "win": { "target": "nsis" }, "mac": { "target": "dmg" }, "linux": { "target": "AppImage" } }
这里是示范代码，给大家说明下，然后优雅草央千澈改为自己的内容
"build": { "productName": "优雅草蜻蜓AI桌面客户端", //产品名字 "directories": { "output": "dist" //输出目录 }, "files": [ "dist/electron/youyacao/" //输出目录具体路劲 ], "win": { "target": "nsis" // 不改 看扩展知识 }, "mac": { "target": "dmg" // 不改 看扩展知识 }, "linux": { "target": "AppImage" // 不改 看扩展知识 } }
这里又有扩展知识了，
扩展知识：
NSIS、DMG和AppImage分别是Windows、macOS和Linux操作系统中用于分发软件的不同格式。以下是对这三种格式的详细介绍：
NSIS (Nullsoft Scriptable Install System)
- 定义和用途：NSIS是一个免费、开源的Windows安装程序制作工具，通过脚本语言描述安装程序的行为和逻辑，允许用户完全控制安装程序的每个部分。
- 特点：支持多语言、高度可定制、小巧且兼容性好。它广泛应用于需要创建Windows安装程序的场景，无论是软件发布、数据库打包还是其他需要自定义安装流程的场景。
DMG (Disk Image)
- 定义和用途：DMG是macOS系统中用于分发软件的一种格式，通常以.dmg文件扩展名出现，用于创建可启动的磁盘镜像，方便用户安装和运行应用程序。
- 特点：提供用户友好的安装界面，直接将应用程序拖拽到“应用程序”文件夹中即可完成安装，适用于Mac平台。DMG文件通常包含应用程序的可执行文件、必要的资源文件和启动器，使得用户可以轻松运行和卸载软件。
AppImage
- 定义和用途：AppImage是一种用于Linux操作系统的应用程序打包格式，它允许开发者创建一个独立的、自包含的应用程序文件，用户下载后即可运行，无需安装过程。
- 特点：具有便携性和可移植性，不依赖于特定的Linux发行版，用户可以在不同的Linux发行版之间轻松移动和使用AppImage文件。AppImage文件通常可以通过赋予执行权限后直接运行，无需额外的安装步骤。
NSIS、DMG和AppImage都是各自操作系统中广泛使用的软件分发格式，它们各自具有独特的特点和优势，选择哪种格式取决于用户的特定需求和操作系统环境。
我们一定更要对很多事物的基本概念要清楚，不然的话做什么都是蒙的，反正优雅草央千澈就是这样的，不管做什么要知道其基础概念，有必要的情况会究其原理。
现在我们执行
npm run build 已经生效，但是报错
> my-electron-app@1.0.0 build > electron-builder 'electron-builder' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
此时，是因为我们还没有安装electron-builder，下一步
4. 安装 Electron Builder
Electron Builder 是一个用于构建和发布 Electron 应用程序的工具。通过 npm 安装它：
npm install electron-builder --save-dev
完成，
5. 打包客户端
完成，再次执行，又报错。
• electron-builder version=25.1.8 os=10.0.19045 • loaded configuration file=package.json ("build" field) • author is missed in the package.json appPackageFile=G:\clone\youyacao-ai-uniapp\package.json ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed. See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246
根据报错 这个错误表明 electron-builder 无法从你的项目中找到 electron 模块。为了解决这个问题，查阅资料，有可能是因为没有添加环境变量，
这个不太可能因为我们执行
electron -v
看到我们版本v33.2.1，因此我们可以指定我们的版本号，指定
"electronVersion": "33.2.1"
再次运行 npm run build
> my-electron-app@1.0.0 build > electron-builder • electron-builder version=25.1.8 os=10.0.19045 • loaded configuration file=package.json ("build" field) • author is missed in the package.json appPackageFile=G:\clone\youyacao-ai-uniapp\package.json • writing effective config file=dist\electron\builder-effective-config.yaml • installing production dependencies platform=win32 arch=x64 appDir=G:\clone\youyacao-ai-uniapp • executing @electron/rebuild electronVersion=33.2.1 arch=x64 buildFromSource=false appDir=./ • installing native dependencies arch=x64 • completed installing native dependencies • packaging platform=win32 arch=x64 electron=33.2.1 appOutDir=dist\electron\win-unpacked • downloading url=https://github.com/electron/electron/releases/download/v33.2.1/electron-v33.2.1-win32-x64.zip size=115 MB parts=8 • downloaded url=https://github.com/electron/electron/releases/download/v33.2.1/electron-v33.2.1-win32-x64.zip duration=11.009s • updating asar integrity executable resource executablePath=dist\electron\win-unpacked\MyElectronApp.exe ⨯ Application entry file "main.js" in the "G:\clone\youyacao-ai-uniapp\dist\electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration. failedTask=build stackTrace=Error: Application entry file "main.js" in the "G:\clone\youyacao-ai-uniapp\dist\electron\win-unpacked\resou rces\app.asar" does not exist. Seems like a wrong configuration. at error (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:7:12) at checkFileInArchive (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:31:11) at WinPackager.checkFileInPackage (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\platformPackager.ts:527:7) at WinPackager.sanityCheckPackage (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\platformPackager.ts:575:5) at WinPackager.doPack (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\platformPackager.ts:329:5) at WinPackager.pack (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\platformPackager.ts:138:5) at Packager.doBuild (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\packager.ts:459:9) at executeFinally (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\builder-util\src\promise.ts:12:14) at Packager.build (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\packager.ts:393:31) at executeFinally (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\builder-util\src\promise.ts:12:14) PS G:\clone\youyacao-ai-uniapp>
这回报错太多了 要仔细看看呢，看起来一大堆 其实在main.js 部分就错了。
⨯ Application entry file “main.js” in the “G:\clone\youyacao-ai-uniapp\dist\electron\win-unpacked\resources\app.asar” does not exist. Seems like a wrong configuration. failedTask=build stackTrace=Error: Application entry file “main.js” in the “G:\clone\youyacao-ai-uniapp\dist\electron\win-unpacked\resou
这里核心问题应该是;
这个错误表明在 “G:\clone\youyacao-ai-uniapp\dist\electron\win-unpacked\resources\app.asar” 文件中找不到应用程序入口文件 “main.js”。这看起来像是配置错误。
5. 配置main.js入口
我们对main.js文件进行改造，对入口文件main.js进行改造。
const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 720, //宽度 height: 1280, //高度 webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); // 加载UniApp应用的index.html mainWindow.loadURL( url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true }) ); mainWindow.on('closed', function () { mainWindow = null; }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); }); app.on('activate', function () { if (mainWindow === null) createWindow(); });
另外我们在main.js代码中可以看到 #ifndef VUE3 和// #endif 包含在一起，这是什么意思呢？
扩展知识：
#ifndef VUE3 是一个C/C++预处理器指令，用于条件编译。它的作用是检查是否已经定义了 VUE3 宏。如果没有定义，则编译器会包含接下来的代码块；如果已经定义了，则编译器会跳过这部分代码。
#ifdef VUE3 #endif #ifdef VUE2 #endif
这个宏可以用来根据不同的Vue版本包含不同的代码。
改造如下，我们再次执行npm run build还是报错，在研究下发现，我应该把main.js和package.json 分开，因为原先我们app的配置太多了，对吧！
优雅草央千澈突然灵机一闪，对啊 引入我们的入口文件的内容总要把内容放进去把。
6. 打包H5
打包h5,打包好以后我在根目录下建立H5文件夹，然后我再把所有配置文件和内容都放进去
那么我们的配置路径也改下吧：
__dirname, ‘H5/index.html
并且我们h5文件目录下的配置文件 仅仅只有打包客户端的配置，其他配置统统删掉。
清晰
7. 继续打包客户端
npm run build 启动！
又报错，因为这个报错
⨯ Application entry file “main.js” in the “G:\clone\youyacao-ai-uniapp\H5\dist\electron\win-unpacked\resources\app.asar” does not exist. Seem
s like a wrong configuration. failedTask=build stackTrace=Error: Application entry file “main.js” in the “G:\clone\youyacao-ai-uniapp\H5\dist\
electron\win-unpacked\resources\app.asar” does not exist. Seems like a wrong configuration.
跟app.asar 非常有关系，因此优雅草央千澈又去外网搜索下相关知识，在谷歌得到
“asar”: true,加入 main.js入口，测试了下，还是失败
然后 ，然后 又得到一个方法重装一下，也试过了 不行
• electron-builder version=25.1.8 os=10.0.19045 • loaded configuration file=package.json ("build" field) • author is missed in the package.json appPackageFile=G:\clone\youyacao-ai-uniapp\H5\package.json • writing effective config file=dist\electron\builder-effective-config.yaml • installing production dependencies platform=win32 arch=x64 appDir=G:\clone\youyacao-ai-uniapp\H5 • executing @electron/rebuild electronVersion=33.2.1 arch=x64 buildFromSource=false appDir=./ • installing native dependencies arch=x64 • completed installing native dependencies • packaging platform=win32 arch=x64 electron=33.2.1 appOutDir=dist\electron\win-unpacked • updating asar integrity executable resource executablePath=dist\electron\win-unpacked\youyacaoAI.exe ⨯ Application entry file "main.js" in the "G:\clone\youyacao-ai-uniapp\H5\dist\electron\win-unpacked\resources\app.asar" does not exist. Seem at Packager.doBuild (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\packager.ts:459:9) at executeFinally (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\builder-util\src\promise.ts:12:14) at Packager.build (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\app-builder-lib\src\packager.ts:393:31) at executeFinally (D:\soft\nvm\v21.1.0\node_modules\electron-builder\node_modules\builder-util\src\promise.ts:12:14)
也就是说目前，到这一步，进行不下去了， 我们可以看到 完整的客户端有打包成功，但是有错误，youyacaoAI.exe
由于现在要赶时间 做另一件事，因此这里先搁置，等优雅草央千澈解决完后再来更新下本文即可，代码和配置文件都推上去了，其他同学可以下载试试，如果有解决了可以联系我更新。
