如何用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

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_json

然后，通过 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可以下载

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_应用程序_02

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智能工具本身是为移动端造的，所以这是我们的尺寸，你们打包其他应用按照自己的来。

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_03

4. 配置package.json

"build": {
  "productName": "MyApp", 
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/electron/**/*"
  ],
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage"
  }
}

这里是示范代码，给大家说明下，然后优雅草央千澈改为自己的内容

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_04

"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

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_05

完成，

5. 打包客户端

完成，再次执行，又报错。

• electron-builder  versinotallow=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

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_06

这个宏可以用来根据不同的Vue版本包含不同的代码。

改造如下，我们再次执行npm run build还是报错，在研究下发现，我应该把main.js和package.json 分开，因为原先我们app的配置太多了，对吧！

优雅草央千澈突然灵机一闪，对啊 引入我们的入口文件的内容总要把内容放进去把。

6. 打包H5

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_07

打包h5,打包好以后我在根目录下建立H5文件夹，然后我再把所有配置文件和内容都放进去

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_08

那么我们的配置路径也改下吧：

__dirname, ‘H5/index.html

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_客户端_09

并且我们h5文件目录下的配置文件 仅仅只有打包客户端的配置，其他配置统统删掉。

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_json_10

清晰

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_json_11

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  versinotallow=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

如何用uniapp打包桌面客户端exe包，vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上_应用程序_12

由于现在要赶时间 做另一件事，因此这里先搁置，等优雅草央千澈解决完后再来更新下本文即可，代码和配置文件都推上去了，其他同学可以下载试试，如果有解决了可以联系我更新。